Motion vocabulary · Logo reveals
Glass pane slide
A frosted pane slides in over a blurred lockup, rests, then slides away and leaves the sharp logo behind.
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 |
|---|---|---|
| pane.in | out-quint | the frosted pane sliding in from the right to rest over the lockup |
| pane.out | in-cubic | the pane sliding away left, leaving the sharp lockup |
| spec.sweep | linear | the specular streak crossing the pane |
This demo
| variant | "glass" |
|---|---|
| wordmark | "LaunchReel" |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.logo(el, {"variant":"glass","wordmark":"LaunchReel","brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
A premium or calm brand; works on gradient or photographic stages.
Why it works
The pane is a physical object with an edge and a highlight, so the reveal has depth without a global glow.
Do not combine with
- another blur effect in the same shot
- a flat background in the exact pane tint (the pane disappears)
Job in the film
Natural length
2.6–3.6 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.
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.
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.