Badgesanimated

Ticker

A breaking-news chip whose text scrolls continuously inside a fixed width.

LIVEBreaking — markets rally as tech leads gains • Breaking — markets rally

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 = "ticker")
val x by t.animateFloat(
    initialValue = 0f,
    targetValue = -1f,
    animationSpec = infiniteRepeatable(tween(4000, easing = LinearEasing)),
    label = "x",
)
Surface(
    shape = RoundedCornerShape(50),
    color = Color(0xFFDC2626),
    contentColor = Color.White,
) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text(
            "LIVE",
            Modifier
                .background(Color.Black.copy(0.18f))
                .padding(horizontal = 8.dp, vertical = 4.dp),
            fontSize = 10.sp,
            fontWeight = FontWeight.Bold,
        )
        Box(
            Modifier
                .width(96.dp)
                .clipToBounds()
                .padding(vertical = 4.dp),
        ) {
            val msg = "Breaking — markets rally as tech leads gains  •  "
            Text(
                msg + msg,
                Modifier.layout { m, c ->
                    val p = m.measure(c)
                    layout(p.width, p.height) {
                        p.place((x * p.width / 2).roundToInt(), 0)
                    }
                },
                maxLines = 1,
                fontSize = 11.sp,
            )
        }
    }
}