Hintsanimated

Pulse beacon

A pulsing beacon dot tied to a short callout that draws the eye to a new feature.

New: AI summaries

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 Beacon(label: String) {
    val alpha by rememberInfiniteTransition(label = "beacon").animateFloat(
        initialValue = 0.6f, targetValue = 0f,
        animationSpec = infiniteRepeatable(tween(1300)), label = "a",
    )
    val scale by rememberInfiniteTransition(label = "beacon2").animateFloat(
        initialValue = 0.6f, targetValue = 2f,
        animationSpec = infiniteRepeatable(tween(1300)), label = "s",
    )
    Row(verticalAlignment = Alignment.CenterVertically) {
        Box(contentAlignment = Alignment.Center) {
            Box(
                Modifier.size(12.dp)
                    .graphicsLayer { scaleX = scale; scaleY = scale; this.alpha = alpha }
                    .clip(CircleShape).background(Color(0xFF6366F1)),
            )
            Box(Modifier.size(10.dp).clip(CircleShape).background(Color(0xFF6366F1)))
        }
        Spacer(Modifier.width(8.dp))
        Text(label, style = MaterialTheme.typography.labelMedium)
    }
}