Motion vocabulary · Timelines and milestones
Step climb
Steps grow from the floor; a glowing ball hops up them one by one, lighting each step and popping its value.
Live loop · 8 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| steps | [{label, value?}] | steps: 2-6 steps, low to high; value pops on landing, the last one slams |
| milestones / goal | [{date, label}] / boolean | roadmap: 3-6 milestones; goal blooms the last one (default true) |
| items / clear | string[] / boolean | hurdles: 3-5 labels; clear: the ball hops each one (done) instead of waiting (to do) |
| step_ms | ms | one beat: hop + dwell, move + dwell, hurdle to hurdle |
| 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 |
|---|---|---|
| step.grow | house | each block growing up from the floor |
| hop.x | in-out-sine | the ball's sideways travel in a hop (its height follows gravity) |
| value.pop | overshoot | a step's value popping when the ball lands |
| slam.drop | in-quad | the last value's landing fall from 1.5x |
| slam.settle | in-out-sine | the last value's settle to 1x |
| drift | linear | the whole staircase drifting 40 px left with the ball |
This demo
| variant | "steps" |
|---|---|
| steps | [{"label":"Link","value":"1"},{"label":"Script","value":"2"},{"label":"Shots","value":"3"},{"label":"Film","value":"Done"}] |
| brand | #F2A03D |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.timeline(el, {"variant":"steps","steps":[{"label":"Link","value":"1"},{"label":"Script","value":"2"},{"label":"Shots","value":"3"},{"label":"Film","value":"Done"}],"brand":"#F2A03D","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
Progress in stages: a record broken several times, a workflow in steps, a growing number of users.
Why it works
The ball gives the progress a body the eye can follow; each landing is a beat for the voice.
Do not combine with
- more than six steps
- steps that are not in rising order
Job in the film
Natural length
4.5–8.0 s