Canon / motion

rule.motion.purpose-first · canon

Motion communicates state, not decoration

Every animation needs intent, reduced-motion fallback, and performance bounds.

Guidance

Use intent recipes; prefer transform/opacity; honor prefers-reduced-motion.

Verification contract

motion package tests + reduced-motion CSS

Supporting references

• ref.apple.hig-motion — Apple HIG — Motion
• ref.google.material-motion — Material 3 Motion — How it works
• ref.ibm.carbon-motion — Carbon motion guidance
• ref.microsoft.fluent-motion — Fluent motion
• ref.motion.motion-react — Motion for React
• ref.web.scroll-driven — CSS scroll-driven animations
• ref.web.view-transitions — View Transitions API

Implementations and verification artifacts

• artifact.component.accordion — Accordion component · packages/react/src/components/Accordion.tsx
• artifact.motion.recipe-set — Motion recipes motion-recipe · packages/motion
• artifact.test.motion-recipes — Motion recipe and reduced-motion suite test · packages/motion/src/recipes.test.ts