Motion vocabulary · Data reveals
Fill tubes and ratio
Glass tubes fill in turn, the first level is drawn across, and the ratio slams onto the last tube.
Live loop · 6 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| value / from / decimals / unit | number / string | counter: the number it lands on, where it starts, its decimals, the unit after it |
| label | string | counter: a short line above the number; bars / curve: the chart's title |
| items | [{label, value, display?}] | tubes (2-4) / bars (2-5): the values; display replaces the landed number |
| ratio / max / highlight | string | false / number / index | tubes: the ratio slammed on the last tube (default "×last/first"); the full scale; bars: the hero bar |
| gauges | [{label, value 0..1, zone?}] | gauges: 1-3 dials; the needle swings to value, zone is the target arc |
| one / many / icon | {label} / {label, count} / icon | pictogram: the one unit, the many (up to 400) and the unit icon ("box", "page", "drop", "clock", "can", "dot") |
| series / xLabel / yLabel | [{label, values[], highlight?}] | curve: 1-3 series; a shorter series stops early with its end pin |
| motion_ms | ms | the main motion's length (roll, fill, grow, count, draw) |
| 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 |
|---|---|---|
| tube.in | house | each tube rising 40 px and fading in |
| fill | out-cubic | the liquid filling (its value rides the surface) |
| ref.draw | out-cubic | the reference line drawn across from the first level |
| slam.drop | in-quad | the landing's fall from 1.5x to 0.94x |
| slam.settle | in-out-sine | the landing's settle from 0.94x to 1x |
This demo
| variant | "tubes" |
|---|---|
| items | [{"label":"Draft","value":4},{"label":"Final","value":10}] |
| unit | "shots" |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.data(el, {"variant":"tubes","items":[{"label":"Draft","value":4},{"label":"Final","value":10}],"unit":"shots","brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
A before-and-after: last release vs this one, the old way vs the new. Two tubes read best; four at most.
Why it works
Filling in turn makes the viewer compare levels, the reference line makes the gap visible, the ratio names it.
Do not combine with
- values with different units in one set
- a ratio under about 1.3 (the slam over-sells it)
Job in the film
Natural length
4.0–7.0 s
More data reveals
Slam counter
A big number rolls fast, settles long and slams on landing with a bloom and an underline.
Bar race
Horizontal bars grow together with a small stagger; values ride the bar ends and the hero bar's value slams.
Gauges into the zone
Up to three dials; their needles swing in turn with a real overshoot into the target zone, which flashes.
Pictogram count
One big unit, an approximately-equals sign, and a grid of small units counting up slow-fast-slow to the total.
Curve draw
Axes draw, then each series draws left to right with a glowing head; the shorter series stops early with its end pin.