Badgesanimated

Streak flame

A day-streak pill with a flame that flickers over a warm gradient.

12 day streak

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 = "flame")
val sy by t.animateFloat(
    initialValue = 0.92f,
    targetValue = 1.12f,
    animationSpec = infiniteRepeatable(tween(420), RepeatMode.Reverse),
    label = "sy",
)
val skew by t.animateFloat(
    initialValue = -4f,
    targetValue = 4f,
    animationSpec = infiniteRepeatable(tween(300), RepeatMode.Reverse),
    label = "skew",
)
Surface(
    shape = RoundedCornerShape(50),
    color = Color.Transparent,
    contentColor = Color.White,
) {
    Row(
        Modifier
            .background(
                Brush.horizontalGradient(
                    listOf(Color(0xFFF97316), Color(0xFFEF4444)),
                ),
            )
            .padding(horizontal = 10.dp, vertical = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        Icon(
            Icons.Filled.LocalFireDepartment,
            contentDescription = null,
            modifier = Modifier
                .size(14.dp)
                .graphicsLayer {
                    scaleY = sy
                    rotationZ = skew
                    transformOrigin = TransformOrigin(0.5f, 1f)
                },
        )
        Text("12 day streak", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
    }
}