Badgesanimated

Gradient flow

A premium pill whose multi-stop gradient drifts continuously across the fill.

PRO

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 = "flow")
val shift by t.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(tween(4000, easing = LinearEasing)),
    label = "shift",
)
val colors = listOf(
    Color(0xFFD946EF), Color(0xFF8B5CF6),
    Color(0xFF3B82F6), Color(0xFFD946EF),
)
Box(
    Modifier
        .clip(RoundedCornerShape(50))
        .drawBehind {
            val w = size.width
            drawRect(
                Brush.linearGradient(
                    colors = colors,
                    start = Offset(-w + shift * 2 * w, 0f),
                    end = Offset(shift * 2 * w, 0f),
                ),
            )
        }
        .padding(horizontal = 12.dp, vertical = 4.dp),
) {
    Text("PRO", color = Color.White, fontWeight = FontWeight.Bold, fontSize = 12.sp)
}