Precise, calm, spatial.
Motion comes from the visual language: lines draw, planes slide, masks reveal, numbers count, cuts land on the beat. Nothing moves unless it reveals information or structure — and everything settles quickly so the footage can breathe.
Guideline
From guidelines/15-motion.md
Precise, calm, spatial.
Nine verbs: draw, reveal, slide, mask, cut, count, expand, crop, track. Timing hierarchy: micro 150–200 ms · text 300–400 ms/line · lower third 400 in / 3–4 s / 250 out · graphic 600–800 ms · transition 400–500 ms · sting ≤ 1 s · outro 2.5–3.5 s. UI stays 160/240 ms.
Video, Reels, ads, presentations, web micro-interactions.
Static posts exported as GIFs.
- Cut more than you transition
- One element moving at a time
- Bounce, elastic, spin, glitch, 3D, whooshes
- Animated logo parts
ExampleSee board Motion (13).
The board
Motion personality, nine verbs, never list, timing hierarchy for editors, sound behaviour
The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.
Timing, live
Each row plays the token on the red marker with the measured ease. UI stays 160 / 240 ms.
| Token | Value | Preview | |
|---|---|---|---|
| 150ms | |||
| 350ms | |||
| 400ms | |||
| 250ms | |||
| 700ms | |||
| 450ms | |||
| 500ms | |||
| 160ms | |||
| 240ms |
The nine verbs
drawrevealslidemaskcutcountexpandcroptrack