Motion vocabulary · Diagram builds
Hub network
A hub and its sources pop in, spokes draw, one source's packets pave its spoke and pulse the hub; then all spokes flow.
Live loop · 8 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 |
|---|---|---|
| hub.pop | overshoot | the hub popping in |
| node.pop | overshoot | each node tag popping in |
| spoke.draw | out-cubic | each spoke drawing to the hub |
| pave | in-out-sine | the source's spoke paving toward the hub |
| packet | in-out-sine | a packet riding the source's spoke |
This demo
| variant | "network" |
|---|---|
| hub | "LaunchReel" |
| nodes | ["Product page","Docs","Screens","Brand","Voice","Music"] |
| from | 0 |
| brand | #6B5BFF |
| stage | light |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.diagram(el, {"variant":"network","hub":"LaunchReel","nodes":["Product page","Docs","Screens","Brand","Voice","Music"],"from":0,"brand":"#6B5BFF","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
Integrations or inputs feeding one product; the source that paves its spoke is the one the line is about.
Why it works
Paving shows one connection in detail while the others say 'and everything else too'.
Do not combine with
- more than eight nodes
- brand names of integrations the brief does not list
Job in the film
Natural length
5.0–8.0 s