Cardsanimated

Weather Now

Current conditions card with a sky gradient and slowly drifting cloud layers.

San Francisco21°Partly cloudy

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 WeatherNowCard() {
  val t = rememberInfiniteTransition(label = "sky")
  val drift by t.animateFloat(
    initialValue = 0f, targetValue = 1f,
    animationSpec = infiniteRepeatable(
      tween(9000, easing = LinearEasing)
    ), label = "drift"
  )
  ElevatedCard(
    modifier = Modifier.fillMaxWidth().height(180.dp)
  ) {
    Box(Modifier.fillMaxSize()) {
      Canvas(Modifier.fillMaxSize()) {
        drawRect(
          brush = Brush.verticalGradient(
            listOf(Color(0xFF4A90E2), Color(0xFFB3D4F5))
          )
        )
        val w = size.width
        val cx = (drift * (w + 160f)) - 80f
        drawCircle(
          Color.White.copy(alpha = 0.85f), 34f,
          Offset(cx, size.height * 0.32f)
        )
        drawCircle(
          Color.White.copy(alpha = 0.7f), 26f,
          Offset(cx + 40f, size.height * 0.36f)
        )
      }
      Column(
        Modifier.fillMaxSize().padding(20.dp),
        verticalArrangement = Arrangement.SpaceBetween
      ) {
        Text(
          "San Francisco", color = Color.White,
          style = MaterialTheme.typography.titleMedium
        )
        Text(
          "21°", color = Color.White,
          style = MaterialTheme.typography.displayMedium
        )
        Text(
          "Partly cloudy", color = Color.White,
          style = MaterialTheme.typography.bodyMedium
        )
      }
    }
  }
}