Captures the design for replacing BounceMarqueeText with a constant-speed TickerText composable (33 dp/s, continuous leftward scroll with gap looping). Made-with: Cursor
1.9 KiB
1.9 KiB
Ticker Text Design
Problem
The BounceMarqueeText composable in NowPlayingScreen.kt scrolls long text at a speed proportional to overflow, clamped to 2000–8000ms. For very long titles, the 8000ms cap means the text covers more distance in the same time — making it visibly faster and harder to read. The bounce-back pattern (scroll left, pause, scroll right) also feels unnatural compared to a continuous ticker.
Decision
Replace BounceMarqueeText with a TickerText composable that scrolls at a constant 33 dp/s leftward, regardless of text length.
Design
TickerText composable
Parameters:
text,style,color,strokeColor,strokeWidth,modifier— same as currentBounceMarqueeTextvelocityDpPerSecond: Float = 33f— constant scroll speed
Behavior:
- Text fits in container: rendered centered and static (no animation).
- Text overflows: scrolls continuously leftward at 33 dp/s.
- After the text exits the left edge, a gap equal to the container width passes (screen appears empty), then the text reappears from the start position and repeats.
Animation math:
totalScrollPx = textWidthPx + containerWidthPxdurationMs = (totalScrollPx / (velocityDpPerSecond * density)) * 1000- No upper clamp — longer text simply takes longer at the same speed.
- Keyframes:
0f→-(textWidthPx)withLinearEasing, then restart. - Initial delay of ~1.5s before first scroll so user can read the beginning.
Stroke overlay: Both the stroke Text and fill Text remain in the same translated Box, moving together.
Callers: TrackInfoSection swaps BounceMarqueeText → TickerText with no other changes.
Rejected alternatives
Modifier.basicMarquee()— less control over gap/looping, uncertain Compose BOM version support, harder to keep the stroke overlay working.- Custom
Canvas+drawText— maximum control but overkill; significantly more code for the same result.