Cardsanimated

Wind Compass

Rotating compass needle points to wind direction with the current gust speed.

Wind

14 km/h

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 WindCompassCard() {
  val dir by animateFloatAsState(
    targetValue = 135f,
    animationSpec = tween(1200), label = "dir"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Row(
      Modifier.padding(20.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Canvas(Modifier.size(90.dp)) {
        drawCircle(
          Color(0xFFE0E0E0),
          style = Stroke(4f)
        )
        rotate(dir) {
          drawLine(
            Color(0xFF32ADE6),
            Offset(size.width / 2, size.height / 2),
            Offset(size.width / 2, 12f),
            strokeWidth = 5f, cap = StrokeCap.Round
          )
          drawLine(
            Color(0xFFB0B0B0),
            Offset(size.width / 2, size.height / 2),
            Offset(size.width / 2, size.height - 12f),
            strokeWidth = 5f, cap = StrokeCap.Round
          )
        }
      }
      Spacer(Modifier.width(20.dp))
      Column {
        Text(
          "Wind",
          color = MaterialTheme.colorScheme.onSurfaceVariant
        )
        Text(
          "14 km/h",
          style = MaterialTheme.typography.headlineSmall
        )
        Text(
          "SE",
          style = MaterialTheme.typography.labelMedium
        )
      }
    }
  }
}