Motion vocabulary · Data reveals
Bar race
Horizontal bars grow together with a small stagger; values ride the bar ends and the hero bar's value slams.
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 |
|---|---|---|
| row.in | house | each row's label and track sliding in |
| grow | out-cubic | each bar growing to its value |
| 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 | "bars" |
|---|---|
| label | "Seconds per step" |
| unit | "s" |
| items | [{"label":"Script","value":12},{"label":"Voice","value":18},{"label":"Motion","value":40},{"label":"Render","value":30}] |
| brand | #2F6BFF |
| stage | light |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.data(el, {"variant":"bars","label":"Seconds per step","unit":"s","items":[{"label":"Script","value":12},{"label":"Voice","value":18},{"label":"Motion","value":40},{"label":"Render","value":30}],"brand":"#2F6BFF","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
Where the time or the effort goes, or how options compare. Keep labels short.
Why it works
Bars that start together turn the comparison into a race the eye follows without reading the axis.
Do not combine with
- more than five bars
- a highlight that is not the point of the line said over it
Job in the film
Natural length
3.5–6.0 s
More data reveals
Slam counter
A big number rolls fast, settles long and slams on landing with a bloom and an underline.
Fill tubes and ratio
Glass tubes fill in turn, the first level is drawn across, and the ratio slams onto the last tube.
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.