maxrave-dev / maxrave-dev/SimpMusic
[Feature Request]: Implement Apple Music-style animated synchronized lyrics
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 11.4k
- Forks
- 599
- Avg merge
- 3d 18h
- Merged PRs (30d)
- 7
Description
Problem Description
Currently, SimpMusic supports synchronized lyrics, which is fantastic for listening along. However, the lyrics display interface remains relatively static. The transition between lines is abrupt, lacking visual hierarchy or fluid motion. This makes the lyrics screen feel a bit standard and misses out on the immersive, premium kinetic typography experience seen in modern streaming apps like Apple Music.
Proposed Solution
Implement a kinetic lyrics view inspired by Apple Music using Compose Multiplatform animation APIs. Key behaviors would include:
Kinetic Auto-Scrolling: Active lyric lines smoothly scroll and center themselves on the screen with fluid momentum.
Focus & Depth Transitions: Active lines scale up slightly with 100% opacity, while preceding/upcoming lines dim (reduced opacity) and shrink slightly to establish clear visual hierarchy.
Smooth Interpolation: Fluid alpha, position, and scale transitions as the playback highlight moves from line to line.
Alternative Solutions
Keep the standard lyrics view but add optional toggleable transition effects (e.g., standard fade-in/out or simple glow highlights) in the settings menu.
Provide a dedicated toggle in settings between "Static Lyrics" (performance mode) and "Animated Lyrics" (visual mode) to preserve performance on low-end hardware.
Additional Context
SimpMusic already supports synced lyrics sources (LRCLIB, Spotify) and Apple Music-style crossfade. Leveraging Jetpack Compose animation modifiers (graphicsLayer for scale/opacity and animateScrollToItem for centering) complements the existing UI features naturally.
https://github.com/user-attachments/assets/6275a3f3-fbc6-45b3-a885-53decc5b3d58
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the existing synchronized lyrics view and its playback highlight handling, then review the Compose Multiplatform animation APIs mentioned in the issue, including graphicsLayer and animateScrollToItem. Check how LRCLIB and Spotify lyrics enter the view and how existing settings toggles are structured. Done means active lines are centered with smooth scale, opacity, and position transitions while a static or performance-friendly option remains available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, kotlin
- Domain
- design, frontend, mobile-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100