Cardsanimated

Exchange Rate

Currency exchange card showing a live rate with a subtly throbbing value.

EUR → USD

1.0847

+0.12% today

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 ExchangeRateCard() {
  val t = rememberInfiniteTransition(label = "throb")
  val s by t.animateFloat(
    0.97f, 1.03f,
    infiniteRepeatable(tween(1100), RepeatMode.Reverse),
    label = "s"
  )
  OutlinedCard(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(20.dp)
  ) {
    Column(Modifier.padding(20.dp)) {
      Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Filled.CircleDollarSign, null,
          modifier = Modifier.size(20.dp))
        Spacer(Modifier.width(8.dp))
        Text("EUR -> USD",
          style = MaterialTheme.typography.titleSmall,
          fontWeight = FontWeight.SemiBold)
      }
      Spacer(Modifier.height(12.dp))
      Text(
        "1.0847",
        style = MaterialTheme.typography.displaySmall,
        fontWeight = FontWeight.Bold,
        modifier = Modifier.graphicsLayer { scaleX = s; scaleY = s }
      )
      Spacer(Modifier.height(6.dp))
      Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Filled.TrendingUp, null,
          tint = Color(0xFF22C55E),
          modifier = Modifier.size(14.dp))
        Spacer(Modifier.width(4.dp))
        Text("+0.12% today",
          style = MaterialTheme.typography.bodySmall,
          color = Color(0xFF22C55E))
      }
    }
  }
}