Cardsanimated

Photo Spot Pin

Photo spot card with animated dropping map pin and bounce settle.

Golden Gate View

Best at sunset

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 PhotoSpotPinCard() {
  val drop = remember { Animatable(-40f) }
  LaunchedEffect(Unit) {
    drop.animateTo(0f, spring(0.4f, 300f))
  }
  Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
    Row(
      Modifier.padding(18.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Canvas(
        Modifier.size(36.dp).graphicsLayer {
          translationY = drop.value
        }
      ) {
        drawCircle(
          Color(0xFFEF4444), size.minDimension / 3,
          Offset(size.width / 2, size.height / 3)
        )
        val p = Path().apply {
          moveTo(size.width / 2, size.height)
          lineTo(size.width * 0.3f, size.height / 2)
          lineTo(size.width * 0.7f, size.height / 2)
          close()
        }
        drawPath(p, Color(0xFFEF4444))
      }
      Spacer(Modifier.width(14.dp))
      Column {
        Text("Golden Gate View",
          style = MaterialTheme.typography.bodyMedium)
        Text("Best at sunset",
          style = MaterialTheme.typography.bodySmall)
      }
    }
  }
}