Foundations / Motion
Fast out, settle gentle.
The motion language is restrained. Out-expo for almost everything. Snappy for layout moves. Spring exists in the system but rarely fires. The whole library lives in three curves and four durations, applied identically everywhere.
The signature is consistency
What makes motion ownable isn’t any single curve. It’s reusing the exact same values across every element. Two durations, one easing curve, one spring config. Rauno Freiberg, Paco Coursey, and Linear all do this. Tiny library, applied everywhere, becomes the brand’s motion fingerprint.
Easing curves.
Each card animates the orange dot using its own curve so you can see the difference. Out Expo is the workhorse. Spring is the exception, used only where overshoot adds meaning.
Durations.
Five duration tokens. Most of the site uses fast or base. Slow is for choreographed entrance sequences. Extra is for page-section reveals. Big enough to feel intentional, short enough to never block.
--dur-instant
Hover-color, micro state changes.
100ms
--dur-fast
Default for hovers and active states.
180ms
--dur-base
Component reveals, accordion expand, sidebar slide.
280ms
--dur-slow
Element entrance from off-screen, hero reveal sequence.
500ms
--dur-extra
Page-section enter on scroll, big editorial moments.
800ms
Rules.
- One curve per surface. Don’t mix Out Expo and Spring on the same component. Pick one.
- Reuse the variable.
transition: width 280ms var(--ease-out-expo), never a raw cubic-bezier. The token is the contract. - Avoid Spring on layout. Overshoot on a moving card looks broken. Save spring for non-positional moments. A button glow, a checkmark snap.
- Respect
prefers-reduced-motion. If the user has it on, drop all durations to 0.01s. The system should still work, just without the choreography.