Cardsanimated

Animated Equalizer

Live equalizer card with continuously bouncing frequency bars over a track.

Pulse FM

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 EqualizerCard(title: String) {
  val transition = rememberInfiniteTransition(label = "eq")
  val bars = List(5) { i ->
    transition.animateFloat(
      initialValue = 0.2f,
      targetValue = 1f,
      animationSpec = infiniteRepeatable(
        tween(400 + i * 120, easing = LinearEasing),
        RepeatMode.Reverse,
      ),
      label = "bar$i",
    )
  }
  Card(
    shape = RoundedCornerShape(20.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Row(
      verticalAlignment = Alignment.CenterVertically,
      modifier = Modifier.padding(16.dp),
    ) {
      Row(
        horizontalArrangement = Arrangement.spacedBy(4.dp),
        verticalAlignment = Alignment.Bottom,
        modifier = Modifier.height(40.dp),
      ) {
        bars.forEach { v ->
          Box(
            modifier = Modifier
              .width(6.dp)
              .fillMaxHeight(v.value)
              .clip(RoundedCornerShape(3.dp))
              .background(MaterialTheme.colorScheme.primary),
          )
        }
      }
      Spacer(Modifier.width(16.dp))
      Text(title, style = MaterialTheme.typography.titleMedium)
    }
  }
}