Cardsanimated

Thermostat Dial

Circular thermostat dial with an animated arc tracking the target temperature.

22°

Heating

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 ThermostatCard() {
  val target = 22f
  val sweep by animateFloatAsState(
    targetValue = (target - 10f) / 20f * 270f,
    animationSpec = tween(1100), label = "sweep"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Column(
      Modifier.padding(20.dp),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      Box(
        Modifier.size(140.dp),
        contentAlignment = Alignment.Center
      ) {
        Canvas(Modifier.fillMaxSize()) {
          drawArc(
            Color(0xFFE0E0E0), 135f, 270f, false,
            style = Stroke(16f, cap = StrokeCap.Round)
          )
          drawArc(
            Color(0xFFFF9500), 135f, sweep, false,
            style = Stroke(16f, cap = StrokeCap.Round)
          )
        }
        Column(
          horizontalAlignment =
            Alignment.CenterHorizontally
        ) {
          Text(
            "22°",
            style = MaterialTheme.typography.displaySmall
          )
          Text(
            "Heating",
            style = MaterialTheme.typography.labelMedium
          )
        }
      }
    }
  }
}