Karaoke Captions
Social formatsWord-timed captions where the spoken word pops onto an accent block and its neighbours dim, in a fixed-height row that never reflows
This is the format it was composed for. Switch above to see it lay itself out for another — same animation, re-arranged for the frame.
What you can change — 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Words *words · array
The spoken words, in order. One caption word each.
now: 12 items
- Per wordperWord · number
Frames per word. Around 9 at 30fps matches natural speech pace.
now: 9
- Windowwindow · number
Words visible at once. Three is the readable maximum on a phone.
now: 3
- Brandbrand · string
Brand token id — one of the keys of BRANDS.
now: slate
For developers — source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
TikTok-style word-timed captions in the lower third, where the current word is scaled up in the accent colour with a block behind it and the neighbouring words are smaller and muted.
