Motion | Arcadia Design

Durations

Each dot crosses with --ease-out over the token's duration. Click a track to run it again, or replay them all to compare.

Token	Use	Value
	Submenus closing, hover-intent fades.
	A floating surface fading out where it stands.
	The shared highlight appearing or leaving.
	A floating surface sliding in: menus, popovers, tooltips.
	The heartbeat: every hover and colour change.
	The shared highlight moving from row to row.
	Layout: disclosures, fades, the backdrop.
	Content entering.
	Content leaving, a dialog fading out.
	A dialog's fade in, toasts arriving.
	A field taking focus: its ink frame and halo.
	A page of content replacing another.
	The release spring: the switch knob.
	Scene changes, a rolling number.
	The settle spring: a dialog rising into place.
	The morph spring: a segmented thumb, a tab underline.
	A product's live signal coming up from the centre.

Easings

Every curve over the same 600ms, twice --duration-slower, slowed so the shape shows.

Token	Use
	Colour and opacity: every hover.
	Size changes.
	Drawers and sidebar groups.
	Floating surfaces opening; the shared highlight gliding.
	Content entering, swaps, toasts, reorders.
	A field taking focus; slow media drift.
	Beams: the live signal and working text.
	Leaving.

Springs

Three springs, sampled into linear() so CSS can run them: one for setting things down, one for things that move, one for coming to rest.

Critically damped: it arrives without overshoot. Dialogs rise into place on it.

ζ 0.84, ω 21.5: half-way in 72ms, 90% in 147ms, a 0.8% overshoot. Indicators that move ride it.

ζ 0.75: a 2.8% overshoot, felt rather than seen. The switch knob coming to rest.

Set down

A dialog starts --dialog-rise (8px) low, fades in over 200ms and rises into place on --ease-settle over --duration-settle, while its backdrop blurs the page.

Release

A press is a colour, never a shrink. The switch knob comes to rest on --ease-release over --duration-release, a hair past its stop.

Chime when a turn ends

Distances

How far things travel. Under reduced motion every one of these collapses to none.

Token	Use	Value
	Floating surfaces slide toward their anchor; they never zoom.
	Dialogs rise into place.
	A solid slab, such as a command palette, drops in.
	Trays slide from the composer's edge.
	Content entering the stream.
	A page of content rises as it swaps in…
	…out of a short blur.
	One glyph replacing another (copy, then a check).

One clock

--loop-watch (3.2s) is the period and every live loop divides it.

The period. A beam crosses for 70%, then 30% dark.

Working

CrossingDark

Half the watch: working text crosses, then rests.

BeamRestBeamRest

Half the watch: four 400ms beats.

00.8s1.6s2.4s3.2s

The playhead is the clock itself, linear. The beams ease across on --ease-sweep, slow off the edge and quick through the middle, so they run ahead of it; the pine lights each frame's stroke as the playhead enters that frame.

One-shot entrances are never pinned, so a pop that happens to be running keeps its own start.

Other loops

Busy and placeholder loops are not live signals, and keep their own periods.

Token	Sample	Use	Value
		Spinner: busy, not live.
		Skeleton: a placeholder breathing.

Reduced motion

One mechanism: <html data-reduce-motion="on">, set before first paint by the boot script and kept in sync by the hooks.

The contract

Distances collapse: the popup slide, the dialog rise, the slab's drop, tray, enter and swap offsets, the swap blur and the glyph morph all go to zero, and the shared highlight jumps instead of gliding. Fades of 150ms or less stay.
Loops stop. A still glyph and its text carry the meaning: the spinner holds its arc, the pine shows its whole mark, and a running live signal holds a steady lamp.
Size and position transitions drop to 0.01ms rather than none, so transitionend still fires (the kit's popups complete at once when nothing runs).
JavaScript motion checks prefersReducedMotion(), which reads the same attribute.

Try it

This switch is the site's own preference (it is also in the top bar's options menu). Replay the tracks above with it on.

Reduce motionStops loops, collapses travel, keeps short fadesThinking

TSX

// JS motion (scroll follow, WAAPI, FLIP) asks once:
if (!prefersReducedMotion()) el.animate(frames, options);

// At the app root: persist the choice and follow the OS while it is "auto".
useMotionPreference(settings.reduceMotion, { storageKey: "myapp.reduceMotion" });

Principles