Cardsanimated

Counter Tiles

A trio of icon tiles count up independent stats with accent colors.

248

512

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 CounterTilesCard() {
  data class Tile(
    val icon: ImageVector,
    val target: Int,
    val color: Color,
  )
  val tiles = listOf(
    Tile(Icons.Default.Favorite, 248, Color(0xFFF43F5E)),
    Tile(Icons.Default.Share, 96, Color(0xFF0EA5E9)),
    Tile(Icons.Default.Star, 512, Color(0xFFF59E0B)),
  )
  Card(
    shape = RoundedCornerShape(18.dp),
    modifier = Modifier.width(260.dp),
  ) {
    Row(
      Modifier
        .padding(16.dp)
        .fillMaxWidth(),
      horizontalArrangement = Arrangement.spacedBy(10.dp),
    ) {
      tiles.forEach { t ->
        val a = remember { Animatable(0f) }
        LaunchedEffect(Unit) {
          a.animateTo(1f, tween(1000, easing = FastOutSlowInEasing))
        }
        Surface(
          shape = RoundedCornerShape(14.dp),
          color = t.color.copy(alpha = 0.12f),
          modifier = Modifier.weight(1f),
        ) {
          Column(
            Modifier.padding(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
          ) {
            Icon(
              imageVector = t.icon,
              contentDescription = null,
              tint = t.color,
              modifier = Modifier.size(20.dp),
            )
            Spacer(Modifier.height(6.dp))
            Text(
              text = "${(t.target * a.value).toInt()}",
              fontWeight = FontWeight.Bold,
            )
          }
        }
      }
    }
  }
}