motion-and-interaction-systemlisted

# 11 — Motion and Interaction System Apply meaning-first CSS animations (scroll-driven, View Transitions, `@starting-style`) with mandatory `prefers-reduced-motion` on every animated surface. ## Motion serves one of three purposes 1. **Feedback** — confirm user action (button press, form submit, save) 2. **Continuity** — preserve spatial context across state changes (page transition, modal open) 3. **Delight** — express brand personality (hero parallax, signature reveal) Anything else = AI slop. Cut it. ## 3-Tier Hierarchy - **Tier 1 — Functional** — feedback on every interaction (hover, focus, active, tap). Duration 100–200ms. Transform/opacity only. - **Tier 2 — Choreographic** — page transitions, modal entrance, section reveal. Duration 300–500ms. View Transitions or `@starting-style`. - **Tier 3 — Cinematic** — hero parallax, signature reveal, scroll-driven storytelling. Duration ≥600ms. Scroll-timeline. Never stack 3 tiers on same surface. One cinematic per page. ## Mandatory `prefers-reduced-motion` EVERY animation MUST honor `prefers-reduced-motion: reduce` — snap to final state, never hide content. ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` ## View Transitions API - Same-document SPA: `document.startViewTransition(() => updateDOM())` - Cross-docum