UI motion
Interface motion has one personality: the bubble. Floating surfaces grow into place and shrink away; nothing slides, bounces sideways, or fades in from nowhere. Character motion is its own system (see Character → Motion); this page is about the chrome.
Imported system. Adopted from the app's design system. The rules apply as written; the app implements this with GSAP; this site's animation dependency is still to be configured.
The bubble
- In: scale from zero with a back-out overshoot (back.out around 1.5) plus a fade, growing out of the edge that faces whatever spawned it. A popover grows from its anchor, a modal from its trigger's direction, never from the screen center by default.
- Out: the reverse, scale to zero with back-in (around 1.6) plus fade, on every close path. Dismissal is never an instant blink while opening was animated.
- Press: real buttons compress to 0.98 on active. This is the only motion baked into static controls.
Page transitions
Route changes cross-fade over half a second with a slight blur and scale, one global implementation. Pages never add their own entrance animations on top of it.
Celebration
A click-spark burst is the sanctioned micro-celebration for single, meaningful confirmations (finishing a tour, a first submission). It is opt-in, small, and never attached to routine actions.
The reduced-motion contract
- Every animation in the product, without exception, checks prefers-reduced-motion.
- The fallback is instant show and instant teardown, never a slower or "calmer" animation.
- Rest states are designed to be valid poses, so switching motion off never strands a surface mid-gesture.