Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/6xingyv/accompanist-lyrics-ui/llms.txt

Use this file to discover all available pages before exploring further.

KaraokeLyricsView exposes a rich set of styling parameters that let you match the lyrics panel to your app’s visual identity — from font families and text sizes to GPU blend modes, Gaussian blur intensities, and the pulsing interlude dots. All styling parameters have sensible defaults that produce the Apple Music aesthetic out of the box.

​
Text Styles

Three TextStyle parameters control the typography of the different text layers:
ParameterDefaultUsed for
normalLineTextStyle34.sp, FontWeight.Bold, TextMotion.AnimatedMain vocal lines
accompanimentLineTextStyle20.sp, FontWeight.Bold, TextMotion.AnimatedBackground/harmony accompaniment lines
phoneticTextStyle13.sp, FontWeight.Normal (derived from normalLineTextStyle)Phonetic ruby text above syllables
To apply a custom font family across all three layers — as the sample app does with SF Pro — pass matching styles: 
val sf = SFPro() // your FontFamily

KaraokeLyricsView(
    listState = listState,
    lyrics = lyrics,
    currentPosition = currentPositionProvider,
    onLineClicked = { onSeekTo(it.start) },
    onLinePressed = { /* ... */ },
    normalLineTextStyle = TextStyle(
        fontSize = 34.sp,
        fontFamily = sf,
        fontWeight = FontWeight.Bold,
        textMotion = TextMotion.Animated
    ),
    accompanimentLineTextStyle = TextStyle(
        fontSize = 20.sp,
        fontFamily = sf,
        fontWeight = FontWeight.Bold,
        textMotion = TextMotion.Animated
    ),
    phoneticTextStyle = TextStyle(
        fontSize = 13.sp,
        fontFamily = sf,
        fontWeight = FontWeight.Normal
    )
)
Always include textMotion = TextMotion.Animated in normalLineTextStyle and accompanimentLineTextStyle. Without it, Compose may optimize away the per-frame text layout invalidations that drive the karaoke fill gradient animation.

​
Text Color

The textColor parameter sets the base color for active (currently singing) text. Inactive text is rendered at a reduced alpha derived from the same color. 
KaraokeLyricsView(
    // ...
    textColor = Color.White  // default
)
Alpha levels used internally:
ContextAlpha
Active line text (main)1.0f (activeAlpha in LyricsLineItem)
Inactive line text0.4f (inactiveAlpha in LyricsLineItem)
Translation text (karaoke line)0.4f
Translation text (synced line)0.6f
Phonetic text (canvas draw)0.4f
Line-level phonetic (KaraokeLine.phonetic)0.6f

​
Blend Modes

The blendMode parameter on KaraokeLyricsView controls how each lyrics line composites against its background layer. The default BlendMode.Plus adds the text color to the underlying pixels, which creates a glowing, luminous effect when the background is dark. 
KaraokeLyricsView(
    // ...
    blendMode = BlendMode.Plus  // KaraokeLyricsView default — additive blending, creates a glow on dark backgrounds
)
KaraokeLyricsView defaults to BlendMode.Plus, but the lower-level KaraokeLineText composable has its own blendMode parameter that defaults to BlendMode.SrcOver. When you use KaraokeLyricsView directly (which is the normal path), KaraokeLyricsView passes its own blendMode value down to KaraokeLineText, so only the KaraokeLyricsView default is relevant in practice. The KaraokeLineText default only applies if you instantiate KaraokeLineText in isolation without specifying a blend mode.
BlendMode.Plus requires the parent composable to use CompositingStrategy.Offscreen so that the text is first rendered into an isolated layer before being composited. Without this, the additive blend applies against the wrong background and produces incorrect results. Apply it to the modifier of the composable wrapping KaraokeLyricsView: 
KaraokeLyricsView(
    listState = listState,
    lyrics = lyrics,
    currentPosition = currentPositionProvider,
    onLineClicked = { onSeekTo(it.start) },
    onLinePressed = { /* ... */ },
    blendMode = BlendMode.Plus,
    modifier = Modifier.graphicsLayer {
        blendMode = BlendMode.Plus
        compositingStrategy = CompositingStrategy.Offscreen
    }
)
For a standard, non-glowing appearance — useful on light backgrounds or when the parent already manages compositing — use BlendMode.SrcOver: 
KaraokeLyricsView(
    // ...
    blendMode = BlendMode.SrcOver,
    textColor = Color.Black
)

​
Blur Effect

The blur effect dims non-active lines by applying a Gaussian blur proportional to how far each line is from the currently focused line. This draws the eye toward the active line and is the defining visual detail of the Apple Music lyrics style. 
KaraokeLyricsView(
    // ...
    useBlurEffect = true,   // default: true
    blurDelta = 3f          // default: blur radius = distance_in_lines × blurDelta
)
blurDelta controls how quickly blur grows with distance. A line 2 positions away from the focused line receives 2 × blurDelta pixels of blur radius. The blur is animated with a 300 ms tween for smooth transitions. Blur is automatically suppressed whenever the user is manually scrolling the list — a drag gesture sets isManualScrolling = true, which immediately zeros the blur target value and lets the list render crisply during interaction. Disable the effect entirely on devices where GPU-accelerated BlurEffect is too expensive: 
KaraokeLyricsView(
    // ...
    useBlurEffect = false
)

​
Breathing Dots

During instrumental interludes and song introductions longer than 5 seconds, KaraokeLyricsView shows pulsing breathing dots. Their appearance is fully customizable through KaraokeBreathingDotsDefaults: 
data class KaraokeBreathingDotsDefaults(
    val number: Int = 3,                        // number of dots
    val size: Dp = 16.dp,                       // diameter of each dot
    val margin: Dp = 12.dp,                     // gap between dots
    val enterDurationMs: Int = 3000,            // fade-in animation duration
    val preExitStillDuration: Int = 200,        // hold-still phase before exit
    val preExitDipAndRiseDuration: Int = 3000,  // dip-and-rise wind-down phase
    val exitDurationMs: Int = 200,              // fade-out animation duration
    val breathingDotsColor: Color = Color.White
)
Pass a customized instance to KaraokeLyricsView: 
KaraokeLyricsView(
    listState = listState,
    lyrics = lyrics,
    currentPosition = currentPositionProvider,
    onLineClicked = { onSeekTo(it.start) },
    onLinePressed = { /* ... */ },
    breathingDotsDefaults = KaraokeBreathingDotsDefaults(
        number = 3,
        size = 20.dp,
        margin = 10.dp,
        enterDurationMs = 2000,
        breathingDotsColor = Color(0xFFE8C4FF) // a soft purple tint
    )
)
The dots animate through five internal stages — fade-in, breathing (gentle cosine pulse), pre-exit dip-and-rise, still hold, and fade-out — and align themselves to the same KaraokeAlignment as the preceding or following line so they feel anchored to the vocal perspective.

​
Offset and Padding

Two Dp parameters control vertical spacing within the list:
  • offset: Dp (default 32.dp) — added as contentPadding at the top and bottom of the LazyColumn, ensuring the first and last lines are never flush against the screen edges.
  • keepAliveZone: Dp (default 100.dp) — additional space kept above the focused line during auto-scroll. Increasing this value keeps more context lines visible above the active line.
KaraokeLyricsView(
    // ...
    offset = 48.dp,
    keepAliveZone = 120.dp
)
These two values also interact with the vertical fade gradient that masks the top and bottom edges of the list — the top fade covers 20.dp and the bottom fade covers 100.dp, so setting offset smaller than those values may make the first or last line partially masked.
For the best visual result, match textColor and blendMode to the luminance of your background. On a dark gradient background (luminance < 0.2), use textColor = Color.White with BlendMode.Plus for the characteristic glow. On a light or white background, switch to textColor = Color.Black and BlendMode.SrcOver to avoid the additive blend washing out to white.

Build docs developers (and LLMs) love

Get started for freeTalk to us