maxrave-dev / maxrave-dev/SimpMusic

[Feature Request]: Implement Apple Music-style animated synchronized lyrics

Open
#2,408 0 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.