motion.*Motion
Motion communicates state changes. Keep it fast and purposeful — never decorative. Click any demo to replay.
Duration
motion.duration.fastmotion.duration.normalmotion.duration.slowEasing curves
motion.easing.standardDefault for most UI transitions. Elements entering and leaving.
motion.easing.decelerateElements entering the screen. Starts fast, ends slow.
motion.easing.accelerateElements leaving the screen. Starts slow, ends fast.
motion.easing.sharpFor objects that may return to screen. Crisp and decisive.
Hover demo — standard easing
This card uses motion.easing.standard at motion.duration.normal (240ms) for the background color and lift transition.
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.
| 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 |
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.