Badgesanimated

Discount stamp

A deal badge that slams in like an ink stamp, overshooting then settling.

-50% OFF

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

var stamped by remember { mutableStateOf(false) }
LaunchedEffect(Unit) { stamped = true }
val scale by animateFloatAsState(
    targetValue = if (stamped) 1f else 1.8f,
    animationSpec = spring(dampingRatio = 0.45f, stiffness = 500f),
    label = "scale",
)
val alpha by animateFloatAsState(
    targetValue = if (stamped) 1f else 0f,
    animationSpec = tween(180),
    label = "alpha",
)
Surface(
    shape = RoundedCornerShape(8.dp),
    color = Color.Transparent,
    contentColor = Color(0xFFE11D48),
    border = BorderStroke(2.dp, Color(0xFFE11D48)),
    modifier = Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
        this.alpha = alpha
        rotationZ = -11f
    },
) {
    Text(
        "-50% OFF",
        Modifier.padding(horizontal = 10.dp, vertical = 3.dp),
        fontWeight = FontWeight.Bold,
        fontSize = 13.sp,
    )
}