design-motion

<objective> A motion pass applied on top of an already-settled layout: the animation-decision gate (should this even animate, what's its purpose, what easing, what duration), transform/opacity-first materials, the 100/300/500ms duration scale, exponential/emphasized easing curves (bounce and elastic are banned outright), and the mandatory `prefers-reduced-motion` fallback shipped in the same pass. Also enforces the ban on the AI motion signature (`opacity:0 + translateY(20px) + ease-in-out` applied uniformly to every entrance). Runs only after the static body/component exists (`design-web`, `design-webapp`, `design-ios`, `design-android`) — never used to hide or compensate for an unfinished layout. </objective> ## 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) ...