compreel
EN中文

Motion vocabulary · Data reveals

Curve draw

Axes draw, then each series draws left to right with a glowing head; the shorter series stops early with its end pin.

Live loop · 7 s · 1920×1080 at 24 fps

Parameters

ParameterTypeWhat it does
value / from / decimals / unitnumber / stringcounter: the number it lands on, where it starts, its decimals, the unit after it
labelstringcounter: 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 / highlightstring | false / number / indextubes: 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} / iconpictogram: 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_msmsthe 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
brandhex
Default: #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
displayfont stem
Default: "Inter-Bold"		headline stem; name it in the call so the runtime loads it
bodyfont stem
Default: "Inter-Regular"		UI / body stem; name it in the call so the runtime loads it
start_msms
Default: 300		when the component starts, ms into the shot
backgroundboolean
Default: 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.

MoveCurveWhat it does
axes.drawout-cubicthe axes drawing
drawin-out-sineeach series drawing left to right
pin.popovershootthe end pin popping at a series' end

This demo

variant"curve"
xLabel"Time"
yLabel"Viewers"
series[{"label":"Without a hook","values":[10,6,4,3,2.6]},{"label":"With a hook","values":[10,9.4,9,8.7,8.5,8.4,8.3,8.2,8.2],"highlight":true}]
brand#6B5BFF
stagelight
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.data(el, {"variant":"curve","xLabel":"Time","yLabel":"Viewers","series":[{"label":"Without a hook","values":[10,6,4,3,2.6]},{"label":"With a hook","values":[10,9.4,9,8.7,8.5,8.4,8.3,8.2,8.2],"highlight":true}],"brand":"#6B5BFF","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

A change over time: growth, a steady plateau, one line that keeps going where another stopped.

Why it works

Drawing in time order tells the story the chart holds; the glowing head shows where 'now' is.

Do not combine with

  • more than three series
  • a curve shape the brief does not describe

Job in the film

  • Proof

Natural length

4.0–7.0 s

Make a film with these moves in LaunchReel

More data reveals

All motion components →