Badgesanimated

Like burst

A like chip whose heart springs and scatters a burst of particles on tap.

2.4k

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

var liked by remember { mutableStateOf(false) }
val scale = remember { Animatable(1f) }
LaunchedEffect(liked) {
    if (liked) {
        scale.animateTo(1.4f, spring(0.35f, 600f))
        scale.animateTo(1f, spring(0.5f, 300f))
    }
}
val rose = Color(0xFFF43F5E)
Row(
    Modifier
        .clip(RoundedCornerShape(50))
        .background(if (liked) rose.copy(alpha = 0.12f) else Color.Transparent)
        .clickable { liked = !liked }
        .padding(horizontal = 10.dp, vertical = 4.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(6.dp),
) {
    Box(contentAlignment = Alignment.Center) {
        if (liked) {
            repeat(6) { i ->
                val a = remember { Animatable(0f) }
                LaunchedEffect(Unit) { a.animateTo(1f, tween(500)) }
                val ang = (i * 60).toFloat()
                Box(
                    Modifier
                        .size(3.dp)
                        .graphicsLayer {
                            val d = a.value * 12f
                            translationX = (cos(ang * PI / 180) * d).toFloat()
                            translationY = (sin(ang * PI / 180) * d).toFloat()
                            alpha = 1f - a.value
                        }
                        .background(rose, CircleShape),
                )
            }
        }
        Icon(
            if (liked) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
            contentDescription = "Like",
            tint = rose,
            modifier = Modifier.size(16.dp).scale(scale.value),
        )
    }
    Text("2.4k", color = if (liked) rose else LocalContentColor.current, fontSize = 12.sp)
}