Animation System

Motion

All transitions share an ease-out character — fast initial movement that decelerates. Duration tokens define timing; easing tokens define the acceleration curve.

Duration Tokens

Each bar slides from left to right with its corresponding duration, using the standard easing curve.

var(--duration-interaction) Hover fills, icon swaps, button state changes

150ms

var(--duration-transition) Accordions, dropdowns, tooltips, tab switches

300ms

var(--duration-reveal) Modals entering, drawers sliding, page reveals

450ms

var(--duration-expressive) Page transitions, hero animations, large choreography

700ms

Easing Curves

Each dot travels at 700ms (expressive duration) so the curve shape is clearly visible.

var(--ease-default) cubic-bezier(0.2, 0, 0.38, 0.9) Default for all in-viewport movement

var(--ease-enter) cubic-bezier(0, 0, 0.38, 0.9) Elements entering from outside the viewport

var(--ease-leave) cubic-bezier(0.2, 0, 1, 0.9) Elements leaving the viewport