Lyrics syncPro
Lyrics highlighted line and word in time with playback.
On this page
ProLines and words light in time; scroll away to stop following.
Installation
Usage
import { LyricsSync } from "@/components/ui/chatcn/pro/lyrics-sync"
<LyricsSync lines={lines} currentTime={time} onSeek={seek} />Give lines word timings to light each word as it is sung; without them the whole line lights at once. The view follows the current line until the reader scrolls, then offers a way back. Reduced motion jumps instead of scrolling smoothly.
Examples
States
ProLine timing only, the intro, and no synced lyrics.
Props
| Prop | Type | Notes |
|---|---|---|
lines | { start, end, text, words?, section? }[] | Seconds |
currentTime, onSeek | number | Playback |
height | number | string | Scrolling view. Default 360 |
Accessibility
- Each line is a button with its start time; the current line is marked with
aria-current. - The line being sung is announced politely, once per line.