43 lines
2.5 KiB
Markdown
43 lines
2.5 KiB
Markdown
# 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.
|