Cardsanimated

Rewards Points

Rewards card with a gift badge and points value that animates upward on load.

Reward Points

8,450

Redeem for $84

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 RewardsPointsCard() {
  val pts = remember { Animatable(0f) }
  LaunchedEffect(Unit) { pts.animateTo(8450f, tween(1300)) }
  ElevatedCard(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(22.dp)
  ) {
    Box(
      Modifier.fillMaxWidth().background(
        Brush.linearGradient(
          listOf(Color(0xFFEC4899), Color(0xFFF59E0B))
        )
      ).padding(22.dp)
    ) {
      Column {
        Row(verticalAlignment = Alignment.CenterVertically) {
          Icon(Icons.Filled.Gift, null, tint = Color.White)
          Spacer(Modifier.width(8.dp))
          Text("Reward Points", color = Color.White,
            style = MaterialTheme.typography.labelLarge)
        }
        Spacer(Modifier.height(10.dp))
        Text(
          "%,d".format(pts.value.toInt()),
          color = Color.White,
          style = MaterialTheme.typography.displaySmall,
          fontWeight = FontWeight.Bold
        )
        Text("Redeem for $84",
          color = Color.White.copy(alpha = 0.9f),
          style = MaterialTheme.typography.bodySmall)
      }
    }
  }
}