Motion vocabulary · 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.
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 |
|---|---|---|
| plate.in | out-quart | the plate uncovering left to right as the group starts |
| plate.out | in-cubic | the plate covering back up after the group ends |
| bar.grow | {"spring":[2.5,1]} | the accent bar growing up from the bottom |
| plate.width | out-quint | the plate's width following the line being spoken |
| line.swap.in | out-quint | the next line rising into the plate |
| line.swap.out | in-quad | the previous line leaving upward |
This demo
| variant | "lowerThird" |
|---|---|
| kicker | "How it works" |
| lines | [{"text":"Paste your product page","start":300,"end":2400},{"text":"LaunchReel reads every screen","start":2500,"end":4600},{"text":"You get a film plan","start":4700,"end":6600}] |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.captions(el, {"variant":"lowerThird","kicker":"How it works","lines":[{"text":"Paste your product page","start":300,"end":2400},{"text":"LaunchReel reads every screen","start":2500,"end":4600},{"text":"You get a film plan","start":4700,"end":6600}],"brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
Naming a step, a speaker or a feature while the picture keeps playing.
Why it works
Anchored bottom-left, it never covers the product UI in the centre.
Do not combine with
- another caption style in the same shot
- a device frame whose screen reaches the bottom-left corner
Job in the film
Natural length
2.0–12.0 s
More subtitles and captions
Karaoke highlight
The whole line is shown dim and each word fills with the brand colour as it is spoken.
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.