Motion vocabulary · Diagram builds
Screen callouts
A screen settles in; points get a rippling dot, a leader line to the side and a label, one by one.
Live loop · 7 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| src / points | "/assets/<screen>.jpg" / [{x, y, label}] | callouts: the screen and 2-5 points (x, y in 0..1 of the screen) |
| items / title / stamp | [{text, mark?: "yes"|"no"|"note", sub?}] / string / string | checklist: 2-5 rows, a heading, a stamp slammed on at the end |
| hub / nodes / from | string / string[] / index | network: the hub, 3-8 nodes and the node whose packets pave its spoke |
| step_ms | ms | one beat between two callouts or two rows |
| 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` |
| camera | {focal?, x?, y?, z?} | the scene's camera: pan x / y and push z as numbers or keyframes [[ms, value, ease?], ...]; objects at different depths move differently (real parallax). focal default 1800 |
| 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 |
|---|---|---|
| panel.in | house | the panel settling in (0.96x -> 1x) |
| push | in-out-sine | the slow 2 % push on the panel and its marks over the whole shot |
| dot.pop | [0.34,1.9,0.64,1] | a point's dot popping |
| ripple | out-quad | the ripple spreading from a dot (repeats) |
| line.draw | out-cubic | the leader line drawing out to the side |
| tag.pop | overshoot | the label popping at the line's end |
This demo
| variant | "callouts" |
|---|---|
| points | [{"x":0.22,"y":0.3,"label":"Paste a link"},{"x":0.7,"y":0.42,"label":"Pick a look"},{"x":0.35,"y":0.78,"label":"Get the film"}] |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.diagram(el, {"variant":"callouts","points":[{"x":0.22,"y":0.3,"label":"Paste a link"},{"x":0.7,"y":0.42,"label":"Pick a look"},{"x":0.35,"y":0.78,"label":"Get the film"}],"brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
Pointing at the parts of a real screen: where to paste, what to pick, what you get.
Why it works
One point at a time keeps the eye on the screen and the label together; the slow push keeps it alive.
Do not combine with
- more than five points on one screen
- points on a placeholder in a film (use the real screen)
Job in the film
Natural length
4.0–7.0 s