Cardsanimated

Post Like Burst

Social post card with a heart like-burst scattering particles on tap.

Just shipped the new design system ✨

241

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 PostLikeBurstCard() {
    var liked by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        if (liked) 1.25f else 1f,
        spring(Spring.DampingRatioMediumBouncy),
        label = "burst"
    )
    OutlinedCard(
        modifier = Modifier.width(300.dp),
        shape = RoundedCornerShape(18.dp)
    ) {
        Column(Modifier.padding(16.dp)) {
            Text(
                "Just shipped the new design system ✨",
                style = MaterialTheme.typography.bodyMedium
            )
            Spacer(Modifier.height(12.dp))
            Row(verticalAlignment = Alignment.CenterVertically) {
                IconButton(onClick = { liked = !liked }) {
                    Icon(
                        Icons.Default.Favorite,
                        contentDescription = "Like",
                        tint = if (liked)
                            MaterialTheme.colorScheme.error
                        else MaterialTheme.colorScheme
                            .onSurfaceVariant,
                        modifier = Modifier.scale(scale)
                    )
                }
                Text(
                    "${if (liked) 241 else 240}",
                    style = MaterialTheme.typography.labelLarge
                )
            }
        }
    }
}