Cardsanimated

Hydration Fill

Water glass fills with an animated rising level toward the daily intake goal.

Hydration

5 of 8 cups

1.25 L today

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 HydrationCard() {
  val goal = 8; val cups = 5
  val level by animateFloatAsState(
    targetValue = cups / goal.toFloat(),
    animationSpec = tween(1000), label = "fill"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Row(
      Modifier.padding(20.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Box(Modifier.size(70.dp, 90.dp)) {
        Canvas(Modifier.fillMaxSize()) {
          val r = 12f
          drawRoundRect(
            Color(0xFFE0E0E0),
            cornerRadius = CornerRadius(r, r),
            style = Stroke(4f)
          )
          val fillH = size.height * level
          drawRoundRect(
            Color(0xFF32ADE6),
            topLeft = Offset(0f, size.height - fillH),
            size = Size(size.width, fillH),
            cornerRadius = CornerRadius(r, r)
          )
        }
      }
      Spacer(Modifier.width(20.dp))
      Column {
        Text(
          "Hydration",
          color = MaterialTheme.colorScheme.onSurfaceVariant
        )
        Text(
          "5 of 8 cups",
          style = MaterialTheme.typography.headlineSmall
        )
        Text(
          "1.25 L today",
          style = MaterialTheme.typography.labelMedium
        )
      }
    }
  }
}