Motion

Motion tokens — durations, curves, and spring presets — honoring prefers-reduced-motion at the token level.

Easing curves — 400ms

Click Run to compare entrances. Overshoot and drag are the distinctive curves.

default

out

in-out

overshoot

drag

Spring presets

The TypeScript object in motion.ts is the source of truth — CSS can't hold a spring literal, so motion.dev consumes the config object directly. Each demo animates a transform-only property (translateX); reduced-motion collapses every run to an instant transition.

snappy

Default for interactive components

stiffness: 400
damping: 30
mass: 1

gentle

Content reveals

stiffness: 180
damping: 26
mass: 1

bouncy

Reserved delight (input-copy check swap)

stiffness: 300
damping: 15
mass: 1

stiff

Short, decisive transitions

stiffness: 500
damping: 40
mass: 1

Durations

instant 0ms --motion-duration-instant

micro 100ms --motion-duration-micro

fast 150ms --motion-duration-fast

normal 200ms --motion-duration-normal

slow 300ms --motion-duration-slow

emphasis 500ms --motion-duration-emphasis

Usage recipes

The standard pairings of duration token to easing token, by intent — the defaults every primitive composes against (mirrored from the motion.css header).

Intent	Duration	Easing
Entrance	--motion-duration-normal 200ms	--motion-ease-out
Exit	--motion-duration-fast 150ms	--motion-ease-in
State change	--motion-duration-fast 150ms	--motion-ease-default
Hover	--motion-duration-fast 150ms	--motion-ease-out
Page nav	--motion-duration-slow 300ms	--motion-ease-in-out

Reduced motion

All durations except --motion-duration-instant collapse to 0ms under @media (prefers-reduced-motion: reduce). The spring demos above short-circuit to an instant transition via the same prefersReducedMotion() guard the $lib/motion helpers use.