Badgesanimated

Shine sweep

A NEW badge with a glint of light that sweeps diagonally across it.

NEW

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 = "shine")
val x by t.animateFloat(
    initialValue = -1f,
    targetValue = 2f,
    animationSpec = infiniteRepeatable(
        tween(2200, easing = LinearEasing),
    ),
    label = "x",
)
Box(
    Modifier
        .clip(RoundedCornerShape(50))
        .background(Color(0xFF7C3AED))
        .drawWithContent {
            drawContent()
            val w = size.width * 0.4f
            drawRect(
                brush = Brush.horizontalGradient(
                    0f to Color.Transparent,
                    0.5f to Color.White.copy(alpha = 0.55f),
                    1f to Color.Transparent,
                ),
                topLeft = Offset(size.width * x, 0f),
                size = Size(w, size.height),
            )
        }
        .padding(horizontal = 12.dp, vertical = 4.dp),
) {
    Text("NEW", color = Color.White, fontWeight = FontWeight.Bold, fontSize = 12.sp)
}