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.

Anchored disclosures

Keep the trigger fixed while its surface opens and closes. Position its resting hit area with grid, flex, or logical inset properties; never rely on a placement transform that hover or active feedback can replace.
Give the surface, background, copy, and actions one origin and one timeline. They should emerge from the trigger together; do not make the background pop before the trigger or appear after the content.
Keep animated disclosure content mounted through entry and exit. Gate pointer and keyboard access separately; conditional rendering directly into the final state is not an entrance animation.
Design opening and closing together. Preserve visible reverse motion long enough before fading opacity, and keep both directions interruptible under repeated clicks.
Let explicit product feedback override the default easing. When a component calls for a slow start followed by acceleration, define a local curve instead of forcing the global ease-out.
Compose hover and active feedback without changing the resting position. If transform composition is unavoidable, use separate wrappers, individual transform properties, or shared custom properties and verify every state.
Keep decorative sweeps subordinate to state motion, low-opacity, bounded to the surface, and finished cleanly. The disclosure must remain legible without the effect.

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 and disclosures 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.

3.8 KiB Raw Permalink Blame History