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:

• Reveal structure or hierarchy within complex layouts
• Create dynamic visualizations for cards, lists, or photos
• Add depth to transitions, intros, or editor UIs

✅ 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.

• Download the latest APK from the release assets.
• Build and install locally using: ./gradlew :samples:android:installDebug (you can also run the sample configuration directly from Android Studio.)
• Check-out the code under samples/android.

• Open the latest WebAssembly demo from the release notes.
• Build and install locally using: ./gradlew :samples:wasm:wasmJsBrowserDevelopmentRun
• Check-out the code under samples/wasm.

• Download the latest JAR from the release assets.
• Build and install locally using: ./gradlew :samples:jvm:run
• Check-out the code under 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.
        }
    }
}

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:

1. Fork the repo
2. Create a new feature branch
3. Add your implementation and test with the sample app
4. Submit a Pull Request ✨

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.

• Mark Wei: Authored the original library and Android sample app
• sadellie: Added KMP support to the library.

• 📘 GitHub: pingpongboss/compose-exploded-layers
• 💬 Issues / Feedback: Open an issue
• 🧠 Author: Mark Wei
• ✨ Inspiration:
  • Alvish Baldha - Keycap Button (Dribbble)
  • Clint Hess - Button Hover Effects (Dribbble)
  • Syntax - CSS Challenge (Youtube)

“Compose your UI — then explode it.”