// chapter 06
Motion
Motion explains, never impresses. Subtle reveals, glow on hover, mono-typing for technical labels. Spectacle is forbidden.
Easings & durations
| Token | Value | Use |
|---|---|---|
| --motion-ease-default | cubic-bezier(0.4, 0, 0.2, 1) | All motion. No alternates. |
| --motion-duration-hover | 150ms | Hover/focus state changes |
| --motion-duration-reveal | 400ms | Layout reveals, modals |
| --motion-duration-long | 700ms | Long-form scroll reveals |
| --motion-typing-char | 35ms / char | Mono typing effect |
Live demo — hover the button
Hover transitions are subtle: translateY of −1px, plus an Amber glow shadow. 150ms ease.
Glow pulse — used very sparingly
3.5s loop, opacity 0.6 → 1.0 → 0.6. Reserved for hero focal points. Never more than one glow per viewport.
Forbidden
- Bouncy easings (cubic-bezier with overshoot).
- Parallax that breaks reading.
- Autoplay video heroes.
- Mouse-trail effects.
- Particle systems.
- 3D scrolljacking.
Accessibility
All motion respects prefers-reduced-motion. The tokens stylesheet ships with a media query that effectively disables animations for users who request reduced motion. Never override this.