💣 Exploded Layers for Jetpack Compose

Turn any composable into an interactive “3D exploded view”.

---

✨ Overview

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

---

🚀 Features

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

---

📲 Demos

Try out the sample apps to see exploded layers in action, and learn by example for how to integrate with the library.

🤖 Android

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

🌐 Web

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

🖥️ Desktop

• Download the latest JAR from the release assets.
• Build and install locally using: ./gradlew :samples:jvm:run
• Check-out the code under samples/jvm.

---

📦 Library Integration

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.

---

📝 Basic Usage

@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.
        }
    }
}

---

⚙️ API Highlights

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

---

⚙️ Configurable Behaviors

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

---

🤝 Contributing

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.

👥 Contributors

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.

---

🌐 Links

• 📘 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.”