Motion vocabulary · Logo reveals
Wordmark draw-on
The mark's outlines and the wordmark's letters draw on in the brand colour, then fill.
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 |
|---|---|---|
| mark.draw | in-out-sine | each part of the mark's outline drawing on (900 ms, 120 ms apart) |
| mark.fill | out-quad | the mark filling as its outline fades |
| word.draw | in-out-sine | the wordmark's outline drawing on (1.2 s) |
| word.fill | out-quad | the wordmark filling |
This demo
| variant | "draw" |
|---|---|
| wordmark | "LaunchReel" |
| brand | #6B5BFF |
| stage | light |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.logo(el, {"variant":"draw","wordmark":"LaunchReel","brand":"#6B5BFF","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));When to use it in a launch film
A crafted, precise brand (design tools, developer tools); an opening or a closing.
Why it works
Line before fill shows care in the making, which is the message of a precise brand.
Do not combine with
- a raster logo (it needs SVG path parts)
- a busy background behind the thin first strokes
Job in the film
Natural length
2.8–3.8 s
More logo reveals
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.
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.