Badgesanimated

Live radar

A live pill whose dot emits staggered radar rings that expand and fade.

LIVE

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 = "radar")
val p by t.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(tween(1600, easing = LinearEasing)),
    label = "p",
)
val red = Color(0xFFEF4444)
Surface(
    shape = RoundedCornerShape(50),
    color = red.copy(alpha = 0.12f),
    contentColor = Color(0xFFDC2626),
) {
    Row(
        Modifier.padding(start = 8.dp, end = 12.dp, top = 4.dp, bottom = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Box(Modifier.size(8.dp), contentAlignment = Alignment.Center) {
            listOf(0f, 0.5f).forEach { off ->
                val f = (p + off) % 1f
                Box(
                    Modifier
                        .size(8.dp)
                        .graphicsLayer {
                            val s = 1f + f * 2.4f
                            scaleX = s
                            scaleY = s
                            alpha = 1f - f
                        }
                        .background(red, CircleShape),
                )
            }
            Box(Modifier.size(8.dp).background(red, CircleShape))
        }
        Text("LIVE", fontWeight = FontWeight.SemiBold, fontSize = 12.sp)
    }
}