Cardsanimated

Full Bleed Cover

Immersive full-bleed cover card with gradient scrim and overlaid play control.

Nightfall

Echo Park

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 FullBleedCover(title: String, artist: String) {
  var playing by remember { mutableStateOf(false) }
  Card(
    shape = RoundedCornerShape(24.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
        .background(
          Brush.linearGradient(
            listOf(Color(0xFFEC4899), Color(0xFF8B5CF6)),
          ),
        ),
    ) {
      Box(
        Modifier
          .fillMaxSize()
          .background(
            Brush.verticalGradient(
              listOf(Color.Transparent, Color(0xCC000000)),
            ),
          ),
      )
      Column(
        Modifier
          .align(Alignment.BottomStart)
          .padding(18.dp),
      ) {
        Text(title,
          color = Color.White,
          style = MaterialTheme.typography.headlineSmall)
        Text(artist, color = Color.White.copy(alpha = 0.8f))
      }
      FilledIconButton(
        onClick = { playing = !playing },
        modifier = Modifier
          .align(Alignment.BottomEnd)
          .padding(18.dp)
          .size(56.dp),
      ) {
        Icon(
          if (playing) Icons.Default.Pause
          else Icons.Default.PlayArrow,
          contentDescription = null,
        )
      }
    }
  }
}