Motion vocabulary · Logo reveals
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.
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 |
| line.rise | out-expo | the line rising 70 px out of its mask |
| button.pop | {"spring":[1.82,0.86]} | the button popping up from 0.86x with a small overshoot |
| shine.sweep | in-out-sine | the light streak crossing the button |
This demo
| variant | "blurUp" |
|---|---|
| wordmark | "LaunchReel" |
| line | "Your product, in motion." |
| cta | "Make your film" |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.endCard(el, {"variant":"blurUp","wordmark":"LaunchReel","line":"Your product, in motion.","cta":"Make your film","brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
The last shot of every film: the logo, the slogan, and what to do next.
Why it works
One line and one action: the end card is a decision, not a menu.
Do not combine with
- a price, a plan, a trial length or a currency in the line or the button
- more than one button
Job in the film
Natural length
3.2–5.0 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.
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.