Subtitle Translate
Dual-language stacked subtitles. Install with npx remotion-ui@latest add subtitle-translate.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add subtitle-translateTwo languages stacked in one subtitle block.
import { SubtitleTranslate } from "@/remotion/primitives/subtitle-translate";
<SubtitleTranslate
cues={[
{
text: "The transcript is the edit.",
translation: "La transcripción es el montaje.",
startMs: 0,
endMs: 1450,
},
]}
languageLabels={["EN", "ES"]}
/>The lines are not equals
The primary carries full weight and ink; the secondary is smaller and dimmer. Style them the same and the block reads as one four-line caption — the viewer has to work out which half is theirs before they can read either.
primary swaps which language leads without touching the data, so the same cue
list serves both cuts of a video.
Timing
The secondary trails the primary by secondaryOffsetInFrames. Both landing on
the same frame doubles the amount of new text at once; a few frames give the eye
an order to take them in.
Nothing renders between cues. Unlike a single-line speaker track, this block is tall enough that holding it through a pause covers the shot.
Language tags
languageLabels puts a fixed-width tag beside each line, so both lines start on
the same left edge even though their type sizes differ. Omit it when the
languages are obvious from their scripts.
The two lines are deliberately unequal in weight and ink — styled the same, the block reads as one four-line caption and the viewer has to work out which half is theirs. The secondary trails by a few frames so the eye is given an order. Nothing renders between cues; the block is tall enough that holding it would cover the shot.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/subtitle-translate- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: cues, primary, fontSize, secondaryScale, 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 { SubtitleTranslate } from "@/remotion/primitives/subtitle-translate";
<SubtitleTranslate
cues={[
{
text: "The transcript is the edit.",
translation: "La transcripción es el montaje.",
startMs: 0,
endMs: 1450,
},
]}
languageLabels={["EN", "ES"]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| cues | TranslatedCue[] | required | A `SubtitleCue` plus `translation`. |
| primary | "source" | "translation" | "source" | Which language leads. Swaps without touching the data. |
| fontSize | number | 46 | Size of the primary line. |
| secondaryScale | number | 0.72 | Secondary size, as a share of `fontSize`. |
| languageLabels | [string, string] | undefined | Fixed-width tags beside each line, e.g. `["EN", "ES"]`. |
| backgroundColor | string | rgba(10,10,14,0.72) | Plate behind both lines. `transparent` drops it. |
| maxWidth | number | 0.78 | Block width as a share of the frame. |
| enterInFrames | number | 10 | Frames a cue takes to arrive. |
| secondaryOffsetInFrames | number | 4 | Frames the second line trails the first by. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |