Motion vocabulary · Subtitles and captions
Karaoke highlight
The whole line is shown dim and each word fills with the brand colour as it is spoken.
Live loop · 8 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| lines (required) | [{text, start, end, words?}] | caption lines in ms of the shot; optional words [{text, start, end}] |
| kicker | string | lowerThird: a short label above the text |
| size | px | type size (default per variant, 48-72) |
| maxChars | numberDefault: 38 / 16 CJK | wrap into two balanced lines past this |
| bottom | pxDefault: 120 | distance from the bottom edge (inside the title-safe area) |
| ease | {"<move>": ease} | retune any named move (see the entry's moves): a preset name ("out-expo"), a cubic-bezier [x1, y1, x2, y2], {spring: [hz, damping]} or {trapezoid: [accel, decel]}. A wrong move name or curve throws, it never falls back. A move measured from a reference clip (the replica workbench's measure/*.json, frame-keyed) becomes a curve without conversion: MV.fitEase(doc, "x", {from: 133, to: 142}) or `motion-fit <file> --measure x --from 133 --to 142 --ease` |
| brand | hexDefault: #6B5BFF | the site's brand colour; the component derives its accent (>= 3:1 on the stage), surfaces and ink from it |
| stage | "dark" | "light"Default: "dark" | the stage the component sits on |
| display | font stemDefault: "Inter-Bold" | headline stem; name it in the call so the runtime loads it |
| body | font stemDefault: "Inter-Regular" | UI / body stem; name it in the call so the runtime loads it |
| start_ms | msDefault: 300 | when the component starts, ms into the shot |
| background | booleanDefault: false | draw the stage background (off: transparent over the shot's own stage) |
| place | {x, y, w, h, z?} | the component's place in the shot's layout: it fits its 1920x1080 composition into this stage rect (centred, aspect kept); z orders components front to back. Default: the whole stage |
Moves and their curves
Every move is eased on its own. Retune one with ease: { "<move>": <curve> }, a curve name or cubic-bezier handles.
| Move | Curve | What it does |
|---|---|---|
| line.in | out-cubic | the line rising 16 px and fading in just before it is spoken |
| line.out | in-quad | the line fading out after it ends |
| word.wipe | linear | the brand colour wiping across each word while it is spoken (follows the voice: keep linear) |
This demo
| variant | "karaoke" |
|---|---|
| lines | [{"text":"Paste a link and LaunchReel writes the script.","start":300,"end":3600},{"text":"Then it draws every shot in motion.","start":3800,"end":6800}] |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.captions(el, {"variant":"karaoke","lines":[{"text":"Paste a link and LaunchReel writes the script.","start":300,"end":3600},{"text":"Then it draws every shot in motion.","start":3800,"end":6800}],"brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
A narrated film watched muted: the viewer reads along at the speaker's pace.
Why it works
The fill marks the spoken word without moving the type, so reading is never disturbed.
Do not combine with
- lines without narration (the highlight then has no clock)
- a line longer than about 60 characters (it reads as a wall of text at 720p)
Job in the film
Natural length
2.0–12.0 s
More subtitles and captions
Lower-third bar
A brand bar grows, a plate slides out of it with the text; the plate resizes between lines and collapses at the end.
Word pop
Words pop in one by one on a spring; the word being spoken sits on a brand pill.
Two-line safe-area captions
Classic captions: at most two balanced lines on a soft plate, inside the 10 % title-safe area, short fades.