Cardsanimated

Spinning Vinyl

Vinyl record card that spins continuously while a track is playing.

Now Spinning

Groove Theory

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 SpinningVinyl(title: String) {
  val rot by rememberInfiniteTransition(label = "spin")
    .animateFloat(
      initialValue = 0f,
      targetValue = 360f,
      animationSpec = infiniteRepeatable(
        tween(6000, easing = LinearEasing),
      ),
      label = "rot",
    )
  Card(
    shape = RoundedCornerShape(24.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Row(
      verticalAlignment = Alignment.CenterVertically,
      modifier = Modifier.padding(18.dp),
    ) {
      Box(
        modifier = Modifier
          .size(96.dp)
          .graphicsLayer { rotationZ = rot }
          .clip(CircleShape)
          .background(
            Brush.radialGradient(
              listOf(Color(0xFF111111), Color(0xFF333333)),
            ),
          ),
        contentAlignment = Alignment.Center,
      ) {
        Box(
          modifier = Modifier
            .size(30.dp)
            .clip(CircleShape)
            .background(
              Brush.linearGradient(
                listOf(Color(0xFFEF4444), Color(0xFFF59E0B)),
              ),
            ),
        )
      }
      Spacer(Modifier.width(18.dp))
      Column {
        Text("Now Spinning", style = MaterialTheme.typography.labelSmall)
        Text(title, style = MaterialTheme.typography.titleMedium)
      }
    }
  }
}