design-motion

## Design Motion — Timing, Easing, Materials, Restraint ### When After the static body/component exists. Motion is applied on top of a settled layout — never used to compensate for or distract from an unfinished one. Hands off to `design-review` next (Part 1 checks the reduced-motion fallback + transform/opacity discipline; Part 2's `motion-verdict.md` issues the Block/Approve). ### Input - `design-system.md` motion personality / `MOTION_INTENSITY` dial (1-10). - The static markup/components to animate. ### The animation gate — before writing any motion code Run every candidate through `references/animation-decision-framework.md`'s 4 questions, in order: (1) should this animate at all — frequency decides, never animate keyboard-initiated or 100+/day actions; (2) what's the one-sentence purpose (spatial consistency / state indication / explanation / feedback / preventing jarring change); (3) what easing; (4) what duration. Most "let's animate this" ideas should die at question 1 — that is the point, not a formality to skip. ### Materials — transform/opacity first, other properties gated Default to `transform` and `opacity` — they skip layout and paint and run on the GPU. Animating `width`/`height`/`top`/`left`/`margin`/`padding` triggers layout+paint+composite and drops frames; see `references/motion-performance.md` for the Framer Motion shorthand caveat (`x`/`y`/`scale` shorthands are NOT hardware-accelerated, use the full `transform` string), the CSS-var recalc trap (nev...