KQ-558 · KARAOKE/LINE

Karaoke Line

A line that lights in time. Each word fills with colour as its window passes — a clip sweeping across the glyphs on a linear tween scaled to that word's own duration, because a fill is a measurement and measurements do not ease — while the word being sung inflates 4% on snap and a soft caret glides ahead on glide, riding the trailing edge of the live word and slipping to the leading edge of the next one through a gap. The clock is either yours through time or the component's through playing, and it never starts on mount. Words are buttons in a roving tabindex: Left and Right walk the line, Home and End jump to its ends, Enter or Space seeks. Under reduced motion the words switch colour at their moment, with no inflate and no travelling caret.

KQ-558 · KARAOKE/LINE

Playhead 0.00s of 5.60s

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/karaoke-line

Props

words: { text: string; start: number; end: number }[]; default —; The line in timing order; start and end are seconds.
time: number; default —; Controlled playhead in seconds. Omit it to use the internal clock.
playing: boolean; default false; Runs the clock at 20 ticks a second. Nothing starts on mount.
onSeek: (time: number) => void; default —; Fires with a word's start time when it is clicked or activated.
onTimeChange: (time: number) => void; default —; Fires on every tick, so a controlled parent can follow the clock.
label: string; default Lyric line; Names the line for assistive technology.

Prop	Type	Default	Description
words	{ text: string; start: number; end: number }[]	—	The line in timing order; start and end are seconds.
time	number	—	Controlled playhead in seconds. Omit it to use the internal clock.
playing	boolean	false	Runs the clock at 20 ticks a second. Nothing starts on mount.
onSeek	(time: number) => void	—	Fires with a word's start time when it is clicked or activated.
onTimeChange	(time: number) => void	—	Fires on every tick, so a controlled parent can follow the clock.
label	string	Lyric line	Names the line for assistive technology.