Interactive 3D exploded-view effect for UI layers — animate collapsed/exploded states, draggable rotation, adjustable spread, axis and easing, integrates with any composable layout.
Turn any composable into an interactive “3D exploded view”.
compose-exploded-layers lets you visually separate your UI into layers, spaced along an offset
vector — rendering your composable tree in 3D space.
Use it to:
✅ Animate between collapsed and exploded states
✅ Draggable 2D exploration (pan and drag to rotate layers)
✅ Customizable spread distance, easing, and axis
✅ Lightweight — built only with Compose primitives
✅ Works with any composable tree
✅ Built with Kotlin Multiplatform (KMP), currently supporting Android, WebAssembly, and Desktop
(JVM)
Try out the sample apps to see exploded layers in action, and learn by example for how to integrate with the library.
./gradlew :samples:android:installDebug (you can also run
the
sample configuration directly from Android Studio.)samples/android../gradlew :samples:wasm:wasmJsBrowserDevelopmentRun
samples/wasm../gradlew :samples:jvm:run
samples/jvm.Step 1: Ensure your Kotlin plugin versions are 2.2.20 or greater.
# libs.versions.toml
[versions]
kotlin = "2.2.20"
[plugins]
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }Step 2: Add the latest version of the library to your module’s build file:
// build.gradle.kts
dependencies {
implementation("io.github.pingpongboss:compose-exploded-layers:<latest-version>")
}💡 Tip: Replace <latest-version> with the latest version from the
library's Maven Central page.
@Composable
fun MyCustomButton() {
val state = rememberExplodedLayersState()
ExplodedLayersRoot(state) {
Box(
Modifier.background(Color.Red) // Base layer.
.separateLayer().background(Color.Blue) // Middle layer.
) {
SeparateLayer { Text("Hello world") } // Top layer.
}
}
}
| Component | Description |
|---|---|
ExplodedLayersRoot() |
Root container that applies 3D offset transforms to the layers nested within |
Modifier.separateLayer() |
Modifier that marks everything after it as belonging to a separate layer |
SeparateLayer() |
Composable that marks its children as belonging to a separate layer |
rememberExplodedLayersState() |
Composable factory to create and remember state |
ExplodedLayersState |
Holds configuration and state (offset, spread, etc.) |
rememberExplodedLayersState() and ExplodedLayersState exposes these configurable behaviors:
interactive — Whether you can drag the exploded view to control its offset.offset — Direction of explosion (e.g., DpOffset(x = -40.dp, y = 40.dp)).spread — Controls how far layers separate (0f–1f).Contributions welcome! To get started:
Please follow the existing code style and include KDoc for new public APIs.
If you are making a non-trivial contribution to the project, feel free to add your name to this section.
“Compose your UI — then explode it.”
Turn any composable into an interactive “3D exploded view”.
compose-exploded-layers lets you visually separate your UI into layers, spaced along an offset
vector — rendering your composable tree in 3D space.
Use it to:
✅ Animate between collapsed and exploded states
✅ Draggable 2D exploration (pan and drag to rotate layers)
✅ Customizable spread distance, easing, and axis
✅ Lightweight — built only with Compose primitives
✅ Works with any composable tree
✅ Built with Kotlin Multiplatform (KMP), currently supporting Android, WebAssembly, and Desktop
(JVM)
Try out the sample apps to see exploded layers in action, and learn by example for how to integrate with the library.
./gradlew :samples:android:installDebug (you can also run
the
sample configuration directly from Android Studio.)samples/android../gradlew :samples:wasm:wasmJsBrowserDevelopmentRun
samples/wasm../gradlew :samples:jvm:run
samples/jvm.Step 1: Ensure your Kotlin plugin versions are 2.2.20 or greater.
# libs.versions.toml
[versions]
kotlin = "2.2.20"
[plugins]
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }Step 2: Add the latest version of the library to your module’s build file:
// build.gradle.kts
dependencies {
implementation("io.github.pingpongboss:compose-exploded-layers:<latest-version>")
}💡 Tip: Replace <latest-version> with the latest version from the
library's Maven Central page.
@Composable
fun MyCustomButton() {
val state = rememberExplodedLayersState()
ExplodedLayersRoot(state) {
Box(
Modifier.background(Color.Red) // Base layer.
.separateLayer().background(Color.Blue) // Middle layer.
) {
SeparateLayer { Text("Hello world") } // Top layer.
}
}
}
| Component | Description |
|---|---|
ExplodedLayersRoot() |
Root container that applies 3D offset transforms to the layers nested within |
Modifier.separateLayer() |
Modifier that marks everything after it as belonging to a separate layer |
SeparateLayer() |
Composable that marks its children as belonging to a separate layer |
rememberExplodedLayersState() |
Composable factory to create and remember state |
ExplodedLayersState |
Holds configuration and state (offset, spread, etc.) |
rememberExplodedLayersState() and ExplodedLayersState exposes these configurable behaviors:
interactive — Whether you can drag the exploded view to control its offset.offset — Direction of explosion (e.g., DpOffset(x = -40.dp, y = 40.dp)).spread — Controls how far layers separate (0f–1f).Contributions welcome! To get started:
Please follow the existing code style and include KDoc for new public APIs.
If you are making a non-trivial contribution to the project, feel free to add your name to this section.
“Compose your UI — then explode it.”