Transcript Scroll
Full transcript scrolling with the active line marked. Install with npx remotion-ui@latest add transcript-scroll.
PrimitiveData & media
$ npx remotion-ui@latest add transcript-scrollA readable transcript that scrolls, with the line being spoken marked.
import { TranscriptScroll } from "@/remotion/primitives/transcript-scroll";
import { parseSubtitles } from "@/remotion/lib/caption-utils";
<TranscriptScroll cues={parseSubtitles(vttSource)} width={740} height={400} />A document, not an overlay
The lines before and after stay on screen, which is the point: the viewer sees
where a quote sits in the conversation. When only the current line should exist,
use srt-caption-track or karaoke-captions instead.
The page glides
Scroll position interpolates between the outgoing and incoming line's offsets
over settleInFrames, rather than snapping to whichever line is active. Driving
it off the index alone makes the page jump a full line height every time the
transcript advances.
Offsets are measured per line rather than assumed from a fixed pitch — a speaker tag adds height, and a fixed pitch drifts out of register down a long transcript. Wrapping is estimated from the character count at the component's own measure; the estimate rounds up, because an extra line of spacing is harmless where an overlap is not.
Reading order
activeColor, readColor and idleColor separate what is being said from what
has been said and what is coming. fadeEdges masks the top and bottom so lines
enter and leave the block instead of being cut off by it.
A document, not an overlay: surrounding lines stay on screen so a quote keeps its place in the conversation. Scroll position interpolates between the outgoing and incoming offsets rather than snapping to the active index, and every line's height is measured because a speaker tag would otherwise drift a fixed pitch out of register.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transcript-scroll- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: cues, width, height, fontSize, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { TranscriptScroll } from "@/remotion/primitives/transcript-scroll";
import { parseSubtitles } from "@/remotion/lib/caption-utils";
<TranscriptScroll cues={parseSubtitles(vttSource)} width={740} height={400} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| cues | SubtitleCue[] | required | `{ text, startMs, endMs, speaker? }`, in order. |
| width | number | 720 | Block width. Wrapping is estimated at this measure. |
| height | number | 420 | Visible height of the scrolling window. |
| fontSize | number | 34 | Body size. Tags and spacing scale off it. |
| activeColor | string | "#fafafa" | Ink of the line being spoken. |
| idleColor | string | rgba(250,250,250,0.3) | Ink of lines not yet reached. |
| readColor | string | idleColor | Ink of lines already read, when it should differ. |
| showSpeakers | boolean | true | Name printed above a line when the speaker changes. |
| showMarker | boolean | true | Accent rule down the left edge of the active line. |
| fadeEdges | number | 90 | Mask height at the top and bottom, in px. 0 disables it. |
| settleInFrames | number | 16 | Frames the scroll takes to settle on a new line. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |