Badgesanimated

Coin flip

A reward chip with a coin that flips in 3D beside the points earned.

+50

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

val t = rememberInfiniteTransition(label = "coin")
val rot by t.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        tween(1600, easing = FastOutSlowInEasing),
    ),
    label = "rot",
)
Surface(
    shape = RoundedCornerShape(50),
    color = Color(0xFFFEF3C7),
    contentColor = Color(0xFFB45309),
) {
    Row(
        Modifier.padding(start = 6.dp, end = 10.dp, top = 4.dp, bottom = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        Box(
            Modifier
                .size(16.dp)
                .graphicsLayer {
                    rotationY = rot
                    cameraDistance = 12f * density
                }
                .background(
                    Brush.linearGradient(
                        listOf(Color(0xFFFCD34D), Color(0xFFF59E0B)),
                    ),
                    CircleShape,
                ),
            contentAlignment = Alignment.Center,
        ) {
            Text("$", color = Color.White, fontSize = 9.sp, fontWeight = FontWeight.Bold)
        }
        Text("+50", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
    }
}