Cardsanimated

Now Playing Mini

Compact now-playing bar with album art, scrubbing progress and a play toggle.

Midnight Drive

Neon Coast

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 NowPlayingMini(
  title: String,
  artist: String,
) {
  var playing by remember { mutableStateOf(true) }
  val progress by animateFloatAsState(
    targetValue = if (playing) 0.62f else 0.4f,
    animationSpec = tween(600),
    label = "progress",
  )
  ElevatedCard(
    shape = RoundedCornerShape(20.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Column {
      Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(12.dp),
      ) {
        Box(
          modifier = Modifier
            .size(48.dp)
            .clip(RoundedCornerShape(12.dp))
            .background(
              Brush.linearGradient(
                listOf(Color(0xFF7C4DFF), Color(0xFFFF4D9D)),
              ),
            ),
        )
        Spacer(Modifier.width(12.dp))
        Column(Modifier.weight(1f)) {
          Text(title, style = MaterialTheme.typography.titleSmall)
          Text(
            artist,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
          )
        }
        FilledIconButton(onClick = { playing = !playing }) {
          Icon(
            if (playing) Icons.Default.Pause
            else Icons.Default.PlayArrow,
            contentDescription = null,
          )
        }
      }
      LinearProgressIndicator(
        progress = { progress },
        modifier = Modifier.fillMaxWidth(),
      )
    }
  }
}