Cardsanimated

Sunrise Sunset Arc

Daylight arc plots the sun's position between sunrise and sunset times.

Daylight

6:12 AM 8:34 PM

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 SunArcCard() {
  val pos by animateFloatAsState(
    targetValue = 0.55f,
    animationSpec = tween(1300), label = "pos"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Column(Modifier.padding(20.dp)) {
      Text(
        "Daylight",
        style = MaterialTheme.typography.titleMedium
      )
      Spacer(Modifier.height(12.dp))
      Canvas(Modifier.fillMaxWidth().height(80.dp)) {
        val w = size.width; val h = size.height
        val path = Path().apply {
          moveTo(0f, h)
          quadraticBezierTo(w / 2, -h * 0.6f, w, h)
        }
        drawPath(
          path, Color(0xFFFFCC00),
          style = Stroke(
            3f, pathEffect =
              PathEffect.dashPathEffect(
                floatArrayOf(8f, 8f)
              )
          )
        )
        val x = w * pos
        val y = h - sin(pos * 3.14f) * h * 1.4f
        drawCircle(Color(0xFFFF9500), 9f, Offset(x, y))
      }
      Row(
        Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
      ) {
        Text("6:12 AM", style =
          MaterialTheme.typography.labelSmall)
        Text("8:34 PM", style =
          MaterialTheme.typography.labelSmall)
      }
    }
  }
}