motion-designlisted

# Motion design Apply these rules to every animation and transition. Examples are dependency-free CSS, plus the Web Animations API and the View Transitions API. They translate directly to any framework or utility system. The detailed rules and patterns are bundled under `./reference/`. Read the relevant file before applying or citing a rule. ## Core mandate Animate only with a clear purpose, keep every animation accessible, and add no runtime dependencies. Motion should clarify a change, not decorate it. Prefer the cheapest technique that works, reuse the project's existing motion tokens, and ship the reduced-motion alternative with the animation rather than as a follow-up. ## Confirmation When you are only reviewing, report findings without pausing. Before applying edits to existing files, confirm the intended change set first, and ask for any context you need to judge correctly instead of guessing. ## Decision sequence Work every animation through these steps in order, and stop at any step that fails. 1. Decide whether to animate. Apply the frequency and purpose gate in the next section, and be willing to ship no animation. Refer to [reference/principles.md](./reference/principles.md). 2. Choose what moves. Animate `transform` and `opacity` only, and keep off layout properties. Refer to [reference/performance.md](./reference/performance.md). 3. Choose the technique. Use a CSS transition for a state change, a CSS animation for a loop, the Web Animations API for scrip