Cardsanimated

Backup Complete

A backup card with a satisfying check-draw on completion.

<Card className="w-60 mx-auto"> <CardContent className="flex flex-col items-center gap-2 p-5"> <CheckCheck className="size-9 text-emerald-500 animate-in zoom-in-50 duration-500" /> <span className="text-sm font-semibold text-foreground">Backup complete</span> <span className="text-xs text-muted-foreground">All 1,204 files secured</span> </CardContent> </Card>

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

@Composable
fun BackupComplete() {
    val scale = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        scale.animateTo(
            1f,
            animationSpec = spring(
                dampingRatio = Spring.DampingRatioMediumBouncy
            )
        )
    }
    ElevatedCard(
        shape = RoundedCornerShape(16.dp),
        modifier = Modifier.padding(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Icon(
                Icons.Rounded.CheckCircle,
                contentDescription = null,
                tint = Color(0xFF22C55E),
                modifier = Modifier
                    .size(40.dp)
                    .scale(scale.value)
            )
            Text("Backup complete")
            Text(
                "All 1,204 files secured",
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}