Text
KaraokeText
Word-by-word highlight sync for lyrics and transcripts with active word glow.
Installation
npm install @ai-animate/core
Usage
import { KaraokeText } from '@ai-animate/core'
<KaraokeText words={['The', 'future', 'of', 'AI']} />
Props
wordsstring[]['The', 'future', 'of', 'AI', 'is', 'already', 'here']Words to display and sync
wordDurationnumber420Duration each word is active in ms
holdMsnumber1000Hold time at end in ms
loopbooleantrueWhether to loop
fontSizestringclamp(1.8rem, 3.5vw, 3rem)Font size
activeColorstring#ffffffActive word colour
spokenColorstringrgba(255,255,255,0.45)Spoken word colour
upcomingColorstringrgba(255,255,255,0.18)Upcoming word colour
fontWeightnumber | string700Font weight
backgroundstringtransparentBackground colour
onCycleComplete() => voidundefinedCalled when cycle completes