KQ-1364 · CAPTION/LIVE
Live Caption
Live captions that behave like the real thing: a script plays at a seeded speaking rhythm, each word landing in draft ink with a small drop on the snap spring, uncertain words shimmering, and a misheard word revising in place once two more words are in — the old word lifts away as the right one rises while the word's box springs to its new width on glide, so the line reflows instead of jumping. When a sentence is complete it settles into solid ink as a left-to-right wash staggered under the 600 ms budget, and the box rolls up on glide like broadcast captions. There is no gesture to answer; a host pauses it through paused.
KQ-1364 · CAPTION/LIVE
Live · Basinworks harbour briefingCC
captioning · 0 of 3 sentences · 165 wpm
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/caption-live
Props
- script
- CaptionSegment[]
- default —
- The captions sentence by sentence: { text, speaker?, corrections?: { word, heard }[] }, where text is the final sentence.
- as
- "div" | "section" | "article" | "figure"
- default "div"
- The element that holds the captions.
- pace
- number
- default 165
- Speaking rate, words a minute.
- confidence
- number
- default 0.7
- How sure the recogniser is, 0 to 1: lower shows more words shimmering in draft ink.
- revise
- boolean
- default true
- Play the recogniser's corrections; false lands every word already right.
- reviseDelay
- number
- default 600
- At least how long a misheard word stands before it is corrected, ms.
- settleDelay
- number
- default 380
- Pause after a sentence's last word before it settles into solid ink, ms.
- lines
- number
- default 2
- How many lines show before the oldest rolls up and away, 1 to 4.
- loop
- boolean
- default true
- Play the script again after it ends.
- loopDelay
- number
- default 2600
- Rest after the last sentence settles before the script starts over, ms.
- marks
- boolean
- default true
- Keep a faint dotted underline under corrected words.
- shimmer
- boolean
- default true
- Low-confidence words shimmer until their sentence settles.
- speakers
- boolean
- default true
- Show a speaker label when the speaker changes.
- ink
- string
- default "var(--foreground)"
- Settled ink, any CSS colour.
- draftInk
- string
- default "var(--ink-3)"
- Draft ink for words still being heard, any CSS colour.
- seed
- number
- default 0
- Seed for the speaking rhythm and the confidence draw.
- paused
- boolean
- default false
- Hold the captions where they are.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When the captions start.
- once
- boolean
- default true
- Play once, or again each time it re-enters view or is hovered.
- delay
- number
- default 0
- Wait before the first word, ms.
- play
- boolean
- default false
- With trigger "manual": true starts the captions, false clears them.
- onSegment
- (index: number) => void
- default —
- A sentence has settled: its index in script.
- onComplete
- () => void
- default —
- The script has played through once more.
- className
- string
- default —
- Classes for the root; the caption size and line height scale from its font size.
| Prop | Type | Default | Description |
|---|---|---|---|
| script | CaptionSegment[] | — | The captions sentence by sentence: { text, speaker?, corrections?: { word, heard }[] }, where text is the final sentence. |
| as | "div" | "section" | "article" | "figure" | "div" | The element that holds the captions. |
| pace | number | 165 | Speaking rate, words a minute. |
| confidence | number | 0.7 | How sure the recogniser is, 0 to 1: lower shows more words shimmering in draft ink. |
| revise | boolean | true | Play the recogniser's corrections; false lands every word already right. |
| reviseDelay | number | 600 | At least how long a misheard word stands before it is corrected, ms. |
| settleDelay | number | 380 | Pause after a sentence's last word before it settles into solid ink, ms. |
| lines | number | 2 | How many lines show before the oldest rolls up and away, 1 to 4. |
| loop | boolean | true | Play the script again after it ends. |
| loopDelay | number | 2600 | Rest after the last sentence settles before the script starts over, ms. |
| marks | boolean | true | Keep a faint dotted underline under corrected words. |
| shimmer | boolean | true | Low-confidence words shimmer until their sentence settles. |
| speakers | boolean | true | Show a speaker label when the speaker changes. |
| ink | string | "var(--foreground)" | Settled ink, any CSS colour. |
| draftInk | string | "var(--ink-3)" | Draft ink for words still being heard, any CSS colour. |
| seed | number | 0 | Seed for the speaking rhythm and the confidence draw. |
| paused | boolean | false | Hold the captions where they are. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When the captions start. |
| once | boolean | true | Play once, or again each time it re-enters view or is hovered. |
| delay | number | 0 | Wait before the first word, ms. |
| play | boolean | false | With trigger "manual": true starts the captions, false clears them. |
| onSegment | (index: number) => void | — | A sentence has settled: its index in script. |
| onComplete | () => void | — | The script has played through once more. |
| className | string | — | Classes for the root; the caption size and line height scale from its font size. |