Cardsanimated

Lyrics Highlight

Synced lyrics card where the active line brightens and gently scales up.

city lights fade away

we chase the open road

stars align tonight

nothing left to hold

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 LyricsHighlight(lines: List<String>, active: Int) {
  Card(
    shape = RoundedCornerShape(20.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Column(Modifier.padding(20.dp)) {
      lines.forEachIndexed { i, line ->
        val on = i == active
        val scale by animateFloatAsState(
          targetValue = if (on) 1.05f else 1f,
          label = "ly$i",
        )
        Text(
          line,
          style = MaterialTheme.typography.titleMedium,
          color = if (on)
            MaterialTheme.colorScheme.primary
          else MaterialTheme.colorScheme.onSurfaceVariant
            .copy(alpha = 0.45f),
          modifier = Modifier
            .padding(vertical = 6.dp)
            .graphicsLayer {
              scaleX = scale
              scaleY = scale
              transformOrigin = TransformOrigin(0f, 0.5f)
            },
        )
      }
    }
  }
}