05 - Motion
Motion means the system is alive.
One easing curve, short durations, and one hard rule: anything that makes a person wait must move. A static spinner says "stuck"; a pulse says "working". On a grid like ours, that difference is the brand.
Wait states
The three sanctioned wait patterns. Every wait state animates; static spinners are banned across all surfaces.
Pulse rings · waiting for hardware
Dot wave · in-flight action
Shimmer · content loading
Hover 180ms · press translateY(1px)
Tokens
--ease-out · cubic-bezier(0.2, 0.8, 0.2, 1)the house curve - hovers, reveals, panels
--ease-soft · cubic-bezier(0.4, 0, 0.2, 1)loops and ambient movement
--dur-hover · 180mshover and press feedback
140–360msproduct UI range - anything longer must earn it
--dur-fade · 600msscroll-triggered reveals on marketing pages
--dur-orb-drift · 60sambient orb drift, alternate direction
Rules
Do
Animate every wait. Pulse rings for hardware, dot wave for actions, shimmer for content. Movement is the "still working" signal.
Don't
No static spinners. Also no bounce, no parallax, no autoplay video, no carousels.
Do
Gate everything behind prefers-reduced-motion. Loops stop; the layout holds on the most informative frame.
Don't
Don't invent curves or durations. Two easings and the token durations cover every case we've met.