Badgesanimated

Rank up

A level chip with chevrons that rise and fade to signal a promotion.

Level 5

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 = "rankup")
val emerald = Color(0xFF059669)
Surface(
    shape = RoundedCornerShape(50),
    color = emerald.copy(alpha = 0.12f),
    contentColor = emerald,
) {
    Row(
        Modifier.padding(start = 6.dp, end = 10.dp, top = 4.dp, bottom = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        Box(Modifier.size(14.dp)) {
            repeat(3) { i ->
                val a by t.animateFloat(
                    initialValue = 0f,
                    targetValue = 1f,
                    animationSpec = infiniteRepeatable(
                        tween(1200, delayMillis = i * 200, easing = LinearEasing),
                    ),
                    label = "chev",
                )
                Icon(
                    Icons.Filled.KeyboardArrowUp,
                    contentDescription = null,
                    modifier = Modifier
                        .size(14.dp)
                        .graphicsLayer {
                            translationY = (1f - a) * 6.dp.toPx() - 3.dp.toPx()
                            alpha = if (a < 0.5f) a * 2 else (1f - a) * 2
                        },
                )
            }
        }
        Text("Level 5", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
    }
}