Motion

Use this skill for Motion for React (motion / formerly Framer Motion) and for product motion design (purpose, tokens, a11y, performance). Prefer current motion.dev React docs over memory — pin narrative to motion@13.x (latest line 13.1.0).

Scope: React and React-based frameworks only (Next.js, Vite+React, Remix, etc.). Do not implement Motion for Vue, vanilla-only pages, or React Native.

Motion is not required for every hover. Keep general design gates; implement with Motion when the project already uses it or needs enter/exit, layout, gestures, or scroll-linked motion beyond CSS.

Core Rule (always)

Before proposing or coding animation, answer:

1. What changed in the interface?
2. Why did it change?
3. Where did the changed thing come from, and where is it going?
4. What should the user notice next?
5. Can the user keep working without waiting for decoration?
6. What is the reduced-motion equivalent?
7. Will this animate on the compositor, or does it trigger layout or paint?