Motion vocabulary · Transitions between shots
Light sweep
A soft band of light crosses the frame; the exposure lifts toward white at the cut and falls after it.
Live loop · 6 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| phase (required) | "out" | "in" | out at the end of the leaving shot, in at the start of the entering shot |
| at_ms | ms | out: shot length minus dur_ms; in: 0 |
| dur_ms | ms | one half (wipe 420, zoomThrough 560, flip 460, sweep 480) |
| dir | "left" | "right" | "up" | "down"Default: "left" | where things travel |
| content | element | selector | zoomThrough / flip: the shot's main wrapper that moves |
| target | {x, y, w, h} | zoomThrough: the UI element the camera goes through, stage px |
| 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 |
|---|---|---|
| band.in | in-quad | out half: the light band travelling to the frame centre |
| band.out | out-quad | in half: the band travelling on and off the frame |
| lift | in-expo | out half: the exposure lifting toward white at the cut |
| fall | out-cubic | in half: the exposure falling back after the cut |
This demo
| variant | "sweep" |
|---|---|
| dir | "left" |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s2", MV.transition(el, {"variant":"sweep","dir":"left","phase":"out","brand":"#6B5BFF"}));
MV.bind("s3", MV.transition(el, {"variant":"sweep","dir":"left","phase":"in","at_ms":0,"brand":"#6B5BFF"}));When to use it in a launch film
Into the end card, or into the signature moment: a lift in energy.
Why it works
Light is local and travels, so it reads as a moment rather than a global flash.
Do not combine with
- the runtime's transition_in on the same cut (two transitions fight)
- light stages where the band has no contrast (use it on dark or mid stages)
Job in the film
Natural length
0.8–1.1 s
More transitions between shots
Brand push / wipe
Two skewed panels in the brand colour cross the frame; the new shot is behind them.
Zoom through a UI element
The camera dives into a card or button until its face fills the frame; the next shot grows out of the same place.
Match-cut card flip
The frame turns edge-on like a card and the next shot turns in from the other side.