Refine ProxyWarden routing workflow

2026-07-22 01:26:51 +03:00
parent 90b2eb507c
commit 67792f245f
15 changed files with 5058 additions and 448 deletions
@@ -0,0 +1,42 @@
+# 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.