KQ-559 · TRANSCRIPT/FLOW
Transcript Flow
A transcript that shows its own confidence. Words arrive tentative in muted ink and firm to foreground on a colour tween when their segment finalises, a word the recogniser revises cross-fades in place with the old copy popped out of flow so the line never doubles in width mid-swap, and new words enter from a nudge on glide. While the microphone is open a dot breathes at the end of the text on drift, the slowest spring in the set, because ambient state should not compete with the words. The view follows the speaker only while the reader is already at the bottom, with one button back to the live edge; the region is a focusable log the keyboard can scroll, and finalised text is announced through a polite status instead of the live edge. Under reduced motion the pulse holds still and the colours simply swap.
Bayfourisreadingtwodegreeslong.
Paused · 1 segments
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/transcript-flow
Props
- segments
- { id: string; text: string; final: boolean }[]
- default —
- The transcript so far, oldest first. Replace a segment's text to revise it in place.
- listening
- boolean
- default false
- Shows the breathing pulse at the end of the text.
- maxHeight
- number
- default 200
- Scroll height in pixels. The box grows to it and no further.
- label
- string
- default Transcript
- Names the log for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | { id: string; text: string; final: boolean }[] | — | The transcript so far, oldest first. Replace a segment's text to revise it in place. |
| listening | boolean | false | Shows the breathing pulse at the end of the text. |
| maxHeight | number | 200 | Scroll height in pixels. The box grows to it and no further. |
| label | string | Transcript | Names the log for assistive technology. |