## Synced Lyrics (S—243)

Time-synced lyrics: the current line lifts and centres as it plays, past lines fade, and tapping a line seeks there.

- URL: https://sundaeui.dev/components/synced-lyrics
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/synced-lyrics.json`
- Tags: karaoke, music, transcript, lyrics, captions, sync

Lines carry a start time; the active one scales up slightly and scrolls to the centre. Tapping any line jumps playback there.
If you scroll manually it stops following until you tap “Back to now”. Works for transcripts and captions too.

### Usage

```tsx
import { SyncedLyrics } from '@/components/sundae/synced-lyrics'

<SyncedLyrics />
```

### Props

- `lines` (`{ t: number; text: string }[]`, required): Timed lines in seconds.
- `duration` (`number`, required): Track length.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Music players, podcasts with transcripts, language learning.

### When not to use

- Untimed text: just show it.

### Accessibility

- The current line is marked aria-current; lines are buttons that seek.
- Following pauses on manual scroll so reading isn’t interrupted.
- Reduced motion removes the movement and keeps every state change.