Motion vocabulary · Logo reveals
Blur-up with ring pulse
The lockup sharpens out of a blur while it grows to size; one ring, then a fainter one, pulses out of the mark.
Live loop · 6 s · 1920×1080 at 24 fps
Parameters
| Parameter | Type | What it does |
|---|---|---|
| wordmark | string | the product name |
| mark | {parts: [{d, fill?}], box?} | false | the mark as SVG path parts in a 100-unit box; omitted = the default reel mark in the brand colour |
| markSize | pxDefault: 168 | mark height; the wordmark is 0.72 of it |
| line / cta | string | endCard: the one line and the button label (a product action, never a price or a trial) |
| x / y | px | lockup centre |
| 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` |
| 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 |
|---|---|---|
| lockup.sharpen | out-cubic | the lockup sharpening out of a blur while it grows from 0.9x |
| ring.grow | out-cubic | each ring pulsing out of the mark |
| ring.fade | out-quad | each ring fading as it grows |
This demo
| variant | "blurUp" |
|---|---|
| wordmark | "LaunchReel" |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.logo(el, {"variant":"blurUp","wordmark":"LaunchReel","brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
The default end-card reveal: quick, clean, works for any brand.
Why it works
Focus pulling is how a camera says 'look here'; the ring marks the exact moment it lands.
Do not combine with
- a whole-frame glow or blur in the same shot (only the lockup blurs)
Job in the film
Natural length
2.4–3.2 s
More logo reveals
Wordmark draw-on
The mark's outlines and the wordmark's letters draw on in the brand colour, then fill.
Mark assembles from parts
The mark's parts fly in from around it and lock together on a soft spring; the wordmark slides out from behind.
Glass pane slide
A frosted pane slides in over a blurred lockup, rests, then slides away and leaves the sharp logo behind.
End card: logo, line, action
A logo reveal, the slogan rising under it, one CTA button that springs in and catches a light once; all of it holds.