components / lyrics
lyrics.
time-synced lyrics with the current line lit and the rest receding. shares playhead's clock, so lines advance between polls; auto-scroll centres the active line and stands down for eight seconds after you scroll by hand. ships parseLrc() for .lrc sheets, and renders unsynced lyrics as a plain sheet.
synced — clicking a line seeks
scroll the box by hand and auto-scroll stands down for eight seconds.
installation
bunx @justin06lee/chrome@latest add lyricsprops
| name | type | default | description |
|---|---|---|---|
| lines * | LyricLine[] | - | { time?: number; text: string }[] — time in seconds; omit it on every line for an unsynced sheet. parseLrc() builds these from .lrc. |
| position | number | 0 | last known playback position in seconds. |
| startedAt | number | Date | - | wall-clock ms at which position was true — the line then advances on its own. |
| playing | boolean | true | |
| onSeek | (seconds: number) => void | - | click a line to jump to its timestamp. |
| autoScroll | boolean | true | scroll the active line into view. |
| height | number | 'auto' | 280 | height of the scroll box in px. |
| align | 'left' | 'center' | 'left' | |
| empty | ReactNode | - | rendered when lines is empty. |
| className | string | - |