motion.*Motion
Motion communicates state changes. Keep it fast and purposeful — never decorative. Click any demo to replay.
Duration
motion.duration.fast120ms
Click to animate
Micro-interactions: button press, toggle, checkbox, hover state.
motion.duration.normal240ms
Click to animate
Standard transitions: card hover, dropdown, tooltip appear.
motion.duration.slow400ms
Click to animate
Large transitions: modal, panel slide, page-level animations.
Easing curves
Standard
motion.easing.standardcubic-bezier(0.4, 0, 0.2, 1)
Default for most UI transitions
Use for: Hover states, toggles, general transitions
Click to replay at 400ms
Decelerate
motion.easing.deceleratecubic-bezier(0, 0, 0.2, 1)
Elements entering the screen
Use for: Menus opening, modals appearing, content loading in
Click to replay at 400ms
Accelerate
motion.easing.acceleratecubic-bezier(0.4, 0, 1, 1)
Elements leaving the screen
Use for: Dismissals, menus closing, content leaving
Click to replay at 400ms
Sharp
motion.easing.sharpcubic-bezier(0.4, 0, 0.6, 1)
Drawers, sidebars that may return
Use for: Quick, decisive movement with no overshoot
Click to replay at 400ms
Hover demo — standard easing
This card uses motion.easing.standard at motion.duration.normal (240ms) for the background color and lift transition.
✦
Hover this card
Watch the border and background color transition using standard easing at 240ms.
Video motion system
Brand video uses a deterministic geometry system — three shapes, one constant velocity, zero exceptions. These rules govern every opener, lower-third, and transition across all Design Better episodes.
Motion geometry — V → C → H
V — Vertical bar slides inC — Arc connects V to HH — Horizontal bar extends
| Property | Value | Notes |
|---|---|---|
| Velocity | 1 500 px / s | Constant — never eased, never variable |
| Canvas | 1920 × 1080 px | Full HD; scale proportionally for 4K |
| Stroke width | 12 px | Same weight for V, C, and H elements |
| Build offset | V +0 ms · C +80 ms · H +160 ms | Staggered chain, no overlap |
| Overshoot | None | No spring. Geometry stops clean. |
| Torn-paper | On exit only | Brand texture applied on scene exit |
| Loop | Holds last frame | Never ping-pongs; hold until cut |
| Font | Space Grotesk | Same as UI system — no exceptions |
Three invariant rules
01
Velocity is fixed at 1 500 px/s.
Every shape travels at exactly this speed. Slow or fast exceptions break the brand feel instantly.
02
The V→C→H sequence is the only permitted geometry.
No circles, no diagonals, no custom paths. The three shapes and their arc connection are the complete vocabulary.
03
V always leads. C and H follow at 80 ms offsets.
The stagger is precise — not approximate. Deviating by even 20 ms collapses the chain's rhythm.
What's still fair game: episode background color, stroke color, frame placement, and text content. These three rules are the brand's motion DNA — everything else is open.
Episode color presets
Twelve approved background and stroke pairings. Pick one per episode. Do not create new combinations — the presets ensure visual consistency across the library.