| name | animation-motion-design |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| description | Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion. |
| tags | ["animation","motion","framer-motion","view-transitions","micro-interactions","gestures","layout-animation","AnimatePresence","prefers-reduced-motion","spring-physics"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 1.0.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | reference |
| targets | [{"library":"motion","version":">=12.0.0"}] |
| metadata | {"category":"document-asset-creation"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
| path_patterns | ["**/animation/**","**/motion/**","*.motion.*","*.framer.*"] |
Animation & Motion Design
Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility.
Quick Reference
| Rule | File | Impact | When to Use |
|---|
| Layout Animations | rules/motion-layout.md | HIGH | Shared layout transitions, FLIP animations, layoutId |
| Gesture Interactions | rules/motion-gestures.md | HIGH | Drag, hover, tap with spring physics |
| Exit Animations | rules/motion-exit.md | HIGH | AnimatePresence, unmount transitions |
| View Transitions API | rules/view-transitions-api.md | HIGH | Page navigation, cross-document transitions |
| Motion Accessibility | rules/motion-accessibility.md | CRITICAL | prefers-reduced-motion, cognitive load |
| Motion Performance | rules/motion-performance.md | HIGH | 60fps, GPU compositing, layout thrash |
Total: 6 rules across 3 categories
Decision Table — Motion vs View Transitions API
| Scenario | Recommendation | Why |
|---|
| Component mount/unmount | Motion | AnimatePresence handles lifecycle |
| Page navigation transitions | View Transitions API | Built-in browser support, works with any router |
| Complex interruptible animations | Motion | Spring physics, gesture interruption |
| Simple crossfade between pages | View Transitions API | Zero JS bundle cost |
| Drag/reorder interactions | Motion | drag prop with layout animations |
| Shared element across routes | View Transitions API |
