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.