Motion

Functional and snappy. Every animation earns its place — motion serves orientation, feedback, or continuity. Never decorative. 100ms for hover, 150ms for micro, 250ms for standard.

Duration Scale

Hover over each row to see the timing in action.

--duration-instant 100ms Hover states, color changes, opacity toggles
--duration-fast 150ms Micro-interactions: button press, checkbox, toggle
--duration-normal 250ms Standard: panel open, dropdown expand, page element enter
--duration-slow 400ms Larger movements: modal enter, sidebar collapse
--duration-dramatic 600ms+ Product-specific dramatic gestures (not system default)

Easing Curves

Hover over each card to see how the easing feels.

DEFAULT
--easing-default cubic-bezier(0.2, 0, 0, 1)

Quick start, smooth stop. The workhorse.

ENTER
--easing-enter cubic-bezier(0, 0, 0.2, 1)

Slides in and gently settles.

EXIT
--easing-exit cubic-bezier(0.4, 0, 1, 1)

Starts slow, then quickly departs.

LINEAR
--easing-linear linear

Constant speed. Mechanical.

Interactive: Duration Tiers

Hover over these buttons to feel the difference between duration tiers.

Choreography Rules

DO
  • Use transform and opacity for animations
  • Elements enter from the direction they will exit to
  • Stagger list items: 30ms between items, max 150ms total
  • Hover states are instant (100ms) — never make the user wait
DON'T
  • Animate layout properties (width, height, top, left)
  • Add motion that does not serve orientation, feedback, or continuity
  • Use spring physics or bouncy easings (system default is snappy)
  • Stagger more than 5 items — after 5, all remaining appear instantly

KEY RULE

Every animation must earn its place by serving orientation (where am I?), feedback (did that work?), or continuity (where did that go?). If an animation does not serve one of these three purposes, remove it.