Iconsanimated

Play ↔ Pause

A play triangle that smoothly morphs into a pause icon and back.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun PlayPause(playing: Boolean, onClick: () -> Unit) {
    val p by animateFloatAsState(if (playing) 1f else 0f, tween(300, easing = EaseInOut), label = "pp")
    val color = LocalContentColor.current
    Canvas(Modifier.size(40.dp).clickable(onClick = onClick)) {
        // Two trapezoids: as p->1 the triangle splits into two pause bars.
        fun bar(side: Int) {
            val path = Path().apply {
                val x0 = lerp(size.width * 0.32f, size.width * (if (side < 0) 0.30f else 0.56f), p)
                val w = lerp(size.width * 0.36f, size.width * 0.14f, p)
                val topInset = lerp(if (side < 0) 0f else size.height * 0.5f, 0f, p) * 0f
                moveTo(x0, size.height * 0.25f + topInset)
                lineTo(x0 + w, lerp(size.height * 0.5f, size.height * 0.25f, p))
                lineTo(x0 + w, lerp(size.height * 0.5f, size.height * 0.75f, p))
                lineTo(x0, size.height * 0.75f); close()
            }
            drawPath(path, color)
        }
        bar(-1); bar(1)
    }
}