motion-design

> **AI-consumed reference.** Taste + technique for motion; the perf ceiling is owned by `rules/agent/frontend-excellence.md` — cross-reference its budget, don't restate it. # Motion Design Motion should *clarify*, not decorate. Small, fast, purposeful. **House style: subtle — no bouncy/springy overshoot as decoration, no infinite loops competing for attention.** ## `prefers-reduced-motion` is MANDATORY Every motion example MUST honor it — non-negotiable. Wrap transitions so reduced-motion collapses them to an instant (opacity-only or none): ```css @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } } ``` In Framer Motion, gate variants on `useReducedMotion()` and drop transforms. ## Two tools, matched to impact - **CSS-only for reveals/stagger** (cheapest, no JS): stagger via `animation-delay: calc(var(--i) * 60ms)` on a keyframed fade-up. Use for hero/list entrance where you don't need interaction. - **Framer Motion for stateful/interactive** motion: declarative `variants` + `initial/animate`, shared layout, gesture. Prefer it only where CSS can't express the state. ## Bundle discipline Framer Motion is heavy — use **`LazyMotion` + `m.` components** (load `domAnimation` features on demand) instead of the full `motion.` import. This keeps it within the `frontend-excellence` perf budget. ## Audit before shipping - **AnimatePresence gaps:** exit animations silently do nothing unless the leaving elemen...