compreel

Motion vocabulary · Subtitles and captions

Two-line safe-area captions

Classic captions: at most two balanced lines on a soft plate, inside the 10 % title-safe area, short fades.

Live loop · 8 s · 1920×1080 at 24 fps

Parameters

ParameterTypeWhat it does
lines (required)[{text, start, end, words?}]caption lines in ms of the shot; optional words [{text, start, end}]
kickerstringlowerThird: a short label above the text
sizepxtype size (default per variant, 48-72)
maxCharsnumber
Default: 38 / 16 CJK
wrap into two balanced lines past this
bottompx
Default: 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`
brandhex
Default: #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
displayfont stem
Default: "Inter-Bold"
headline stem; name it in the call so the runtime loads it
bodyfont stem
Default: "Inter-Regular"
UI / body stem; name it in the call so the runtime loads it
start_msms
Default: 300
when the component starts, ms into the shot
backgroundboolean
Default: 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.

MoveCurveWhat it does
line.inlinearthe line fading in over 120 ms at its start
line.outlinearthe line fading out over 120 ms at its end

This demo

variant"safe"
lines[{"text":"LaunchReel reads your product page and plans six shots.","start":300,"end":3600},{"text":"Each shot shows one real screen from your site.","start":3800,"end":7200}]
brand#6B5BFF
stagelight
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.captions(el, {"variant":"safe","lines":[{"text":"LaunchReel reads your product page and plans six shots.","start":300,"end":3600},{"text":"Each shot shows one real screen from your site.","start":3800,"end":7200}],"brand":"#6B5BFF","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

Narration that runs over product footage for a long stretch; the quietest option.

Why it works

Captions should be read, not watched: no motion beyond a 120 ms fade.

Do not combine with

  • text near the bottom edge of the shot (the plate covers it)

Job in the film

  • Feature
  • Proof

Natural length

2.0–60.0 s

Make a film with these moves in LaunchReel

More subtitles and captions

All motion components →