Cardsanimated

Money Transfer

Transfer card showing sender to recipient with an arrow that glides across.

Transfer

$540.00

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 MoneyTransferCard() {
  val t = rememberInfiniteTransition(label = "glide")
  val shift by t.animateFloat(
    0f, 1f,
    infiniteRepeatable(tween(1400), RepeatMode.Restart),
    label = "s"
  )
  Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(20.dp)
  ) {
    Column(Modifier.padding(20.dp)) {
      Text("Transfer",
        style = MaterialTheme.typography.labelMedium)
      Spacer(Modifier.height(14.dp))
      Row(verticalAlignment = Alignment.CenterVertically) {
        Box(
          Modifier.size(40.dp)
            .background(MaterialTheme.colorScheme.surfaceVariant,
              CircleShape),
          contentAlignment = Alignment.Center
        ) { Text("AC") }
        Box(Modifier.weight(1f), Alignment.CenterStart) {
          Divider(Modifier.fillMaxWidth())
          Icon(
            Icons.Filled.Send, null,
            modifier = Modifier
              .offset(x = (shift * 120).dp)
              .size(18.dp),
            tint = MaterialTheme.colorScheme.primary
          )
        }
        Box(
          Modifier.size(40.dp)
            .background(MaterialTheme.colorScheme.primaryContainer,
              CircleShape),
          contentAlignment = Alignment.Center
        ) { Text("JM") }
      }
      Spacer(Modifier.height(14.dp))
      Text("$540.00",
        style = MaterialTheme.typography.headlineSmall,
        fontWeight = FontWeight.Bold)
    }
  }
}