web-interactionlisted

# Web Interaction Rules for controls, states, and micro-feedback. Motion budgets that are not GSAP timelines belong here; scroll/timeline choreography → web-animation. ## Eight states (every interactive control) | State | Treatment | |-------|-----------| | Default | Rest styles | | Hover | Contrast↑; optional lift (`translateY(-1px)`) + shadow↑ | | Focus | Visible ring (`:focus-visible`); never `outline: none` without replacement | | Active/pressed | `scale(0.96–0.98)` or `translateY(1px)` | | Disabled | Opacity↓ + `pointer-events: none` / `aria-disabled`; not color alone | | Loading | Skeleton matching final shape &gt; generic spinner | | Error | Inline message + `aria-describedby`; border/icon | | Empty/success | Directional empty; success confirmation | Hover ≠ focus. Design both. ## Forms - Visible `<label>`; placeholders are not labels. - Validate on blur (except password strength). - Error below field; helper optional above/below consistently. - CTA text one line at desktop; one label per intent page-wide. - Button text vs fill ≥ 4.5:1 (large text 3:1). ## Feedback contracts - Interaction feedback ≤ **100ms** perceived. - Hover: transform + color + shadow together when elevating; never change `font-weight` / padding / border-width on hover (layout jump). - Disable pointer events on exiting elements. - Optimistic UI only for low-stakes actions. - Destructive: prefer undo over confirm when possible. ## Micro-motion (CSS / small UI) ```css --motion-fast: 120ms;