Motion is quiet — a small scale, used sparingly
Animation in this system is functional, not decorative: it confirms an interaction, reveals structure, or signals loading. The whole vocabulary is seven durations and five easing curves, defined once as --motion-* tokens and shared by the component library and this site. Never write a literal 0.2s ease in component CSS — compose a duration token with an easing token instead. Click any tile to replay its animation.
Durations — core scale
Four steps cover day-to-day UI. Base is the workhorse — the standard for colour, opacity, and border transitions. Step down to fast for hover feedback, up to slow for structural change, and reserve slower for page entrances. Each tile animates at its token's actual speed.
--motion-duration-fast150ms--motion-duration-base200ms--motion-duration-slow300ms--motion-duration-slower600ms- FastQuick feedback: hovers, icons, tooltips, nav links
- BaseThe default — colour, opacity, and border transitions
- SlowStructural change: accordion, sidebar width, toast enter
- SlowerDeliberate page-entrance reveals
Durations — extended
Special-purpose timings that would otherwise live as magic numbers. They are named so they stay consistent, but they are not part of the day-to-day scale — reach for the core four first.
--motion-duration-deliberate400ms--motion-duration-loop-spin1000ms--motion-duration-loop-shimmer1800ms- DeliberateCarousel slide
- Loop spinSpinner rotation
- Loop shimmerSkeleton shimmer
Easing curves
Five named curves, each with a distinct job. Every tile animates over the same 600ms so the shape of the curve is what you see — standard for everyday transitions, emphasized for layout, entrance for anything appearing on screen, linear for loops, spring for the one sanctioned overshoot.
--motion-ease-standardease--motion-ease-emphasizedcubic-bezier(0.4, 0, 0.2, 1)--motion-ease-entrancecubic-bezier(0.16, 1, 0.3, 1)--motion-ease-linearlinear--motion-ease-springcubic-bezier(0.34, 1.56, 0.64, 1)- StandardGeneral default for colour and opacity transitions
- EmphasizedSize and layout changes — sidebar width, accordion height
- EntranceExpressive decelerate for enter animations — modals, dropdowns, toasts
- LinearContinuous motion — spinner, progress bars
- SpringPlayful overshoot — toggle switch thumb
Reduced motion
The token layer respects prefers-reduced-motion at the source: when the preference is set, every duration token collapses to 0.01ms and a universal guard flattens any remaining hardcoded transitions and animations. Components that use the tokens get accessibility for free — there is nothing to opt into, and no component-level media queries to write.