Home/Foundations/Motion

Motion

Motion clarifies state changes — it never decorates. Four durations, four easings, six entrance primitives. Reduced-motion always wins.

9 primitives 4 durations prefers-reduced-motion

Durations

Shorter for state changes, longer for entrances. Never longer than 480ms — operators are working.

--dur-instant

80ms

--dur-fast

120ms

--dur-base

200ms

--dur-slow

320ms

--dur-slower

480ms

--dur-page

640ms

Token	Value	Use for
--dur-instant	80ms	Tooltips, instant feedback
--dur-fast	120ms	Hover, button states
--dur-base	200ms	Popover & modal entry
--dur-slow	320ms	Side sheet, page-section reveals
--dur-slower	480ms	Full-screen transitions
--dur-page	640ms	Page-level orchestration

Easings

Four curves. Out for entrances, in-out for transforms, spring for delight, snap for instantaneous corrections.

Out

--ease-out

Default for entrances. Cubic-bezier(0.22, 1, 0.36, 1)

In-out

--ease-in-out

For elements that move on both sides.

Spring

--ease-spring

Light overshoot. For small delightful enters.

Snap

--ease-snap

Quick step. For corrections and validation.

Animation primitives

Apply one of these CSS classes to fade/slide an element in. Combine with .anim-delay-1 through .anim-delay-5 to orchestrate stacks.

Fade in

.anim-fade-in

Fade up

.anim-fade-up

Scale in

.anim-scale-in

Slide right

.anim-slide-right

Pulse

.anim-pulse

Staggered entry

.anim-fade-up + .anim-delay-N

Do & don't

Use motion to clarify state changes. A popover opening explains where it came from.

Don't

Use motion to decorate. If it doesn't communicate something, remove it.

Respect prefers-reduced-motion. The token system shrinks all durations to ~0 automatically.

Don't

Animate the same element on every state. Choose where animation matters.