compreel
EN中文

Motion vocabulary · Big title kinetic type

Weight and width morph

Letters go from regular to bold from the centre out while the tracking closes in: the word gets heavier as it lands.

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

Parameters

ParameterTypeWhat it does
text (required)stringthe title; "\n" breaks lines
accentstringa word of the text drawn in the brand colour
size"super" | "chapter" | "ui" | px
Default: "super"		type scale: super 144, chapter 64, ui 40 (px at 1080p); wide lines are fitted to maxWidth
align"center" | "left"
Default: "center"		alignment and anchor
x / y / maxWidthpxanchor and the widest a line may be (default 1600)
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`
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
track.inout-cubicthe letter spacing closing from wide to tight over the whole build
weight.morphin-out-sineeach letter crossing from the light to the heavy weight, from the middle out
fadelinearthe letters fading in before the morph

This demo

variant"weight"
text"Make it move"
accent"move"
brand#6B5BFF
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.title(el, {"variant":"weight","text":"Make it move","accent":"move","brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

A one- to three-word statement that should feel like it gains weight: a slogan, the product name.

Why it works

Weight is emphasis; animating it shows emphasis being added instead of shouting with scale.

Do not combine with

  • a second kinetic title in the same shot
  • long lines (more than 20 letters: the per-letter cross-fade turns busy)

Job in the film

  • Hook
  • End card

Natural length

2.0–3.2 s

Make a film with these moves in LaunchReel

More big title kinetic type

All motion components →