Motion and interaction

Character

Use fluid, slightly viscous motion that makes work and state legible without moving layout. Avoid bounce, elastic easing, abrupt unmounts, and decorative page choreography.

Use cubic-bezier(0.16, 1, 0.3, 1) for arrivals and interaction feedback.

hover and press: 180-300ms;
popover/tooltip: 90-180ms;
panel reveal: 420-600ms;
state color and glow: 600-900ms;
progress or numeric tween: about 900ms.

State controls

Transition inactive gray to the route accent slowly when a service becomes active, and back to gray when stopped.
Animate icon color, localized light, and SVG shadow together while keeping the hit target fixed.
Use a short scale(0.97) press followed by a slower release.
Show checking and running work with restrained motion that finishes cleanly; do not stop spinners or cycles at arbitrary coordinates.

Changing content

Crossfade alternate labels inside one fixed slot. Do not replace text in normal flow when its length can move the interface.
Animate only what changed. Unchanged labels, icons, surrounding rows, and route nodes stay fixed.
Update data immediately when it arrives; finishing a decorative cycle must not delay the result.
Repeated background polling updates quietly and does not replay entrance choreography.
Keep mode selectors outside the keyed content they replace. Let the new content enter with a short directional fade and blur while focus remains on the selected mode.
For user-triggered sorting, fade and lightly blur the reordered list as one surface; row stagger stays bounded and saved data order does not change.

Lists and disclosures

Reveal dynamic rows with opacity, light blur, and a small transform.
On hover, let a row lift one or two pixels and reveal a restrained local surface/light; keep resting rows visually flat.
Animate status dots through color, light, and a small scale change instead of animating a surrounding badge or border.
Keep departing rows mounted until their exit animation completes; remove immediately under reduced motion.
Bound list stagger to 60-100ms and never make interaction latency grow with list length.
Tooltips appear quickly above the trigger as independent translucent surfaces and never inherit trigger transforms or filters.

Reduced motion

Under prefers-reduced-motion: reduce, remove transforms, filters, transitions, and keyframes while preserving final state, focus, contrast, status wording, and all functionality.

2.5 KiB Raw Blame History