motion-patterns
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/motion-patterns/SKILL.md
- License
- MIT
- Jobs
- UI/UX work
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Motion Patterns Copy-paste patterns for the most common UI animation needs. Every pattern here is built on `motion-foundations` tokens and springs. Do not define new duration or easing values here — import them. ## When to Activate - Animating a button, card, modal, or toast notification - Building list entrances with stagger - Setting up page transitions in Next.js App Router - Adding entrance or exit animations to conditional content - Implementing scroll-reveal, scroll-linked progress, or sticky story sections - Building expanding cards, accordions, or shared-element transitions ## Outputs This skill produces: - Accessible, SSR-safe animation for all standard UI components - `AnimatePresence`-wrapped conditional renders with correct exit behavior - Page transition wrapper component for Next.js App Router - Scroll-reveal and scroll-linked patterns using `useScroll` + `useTransform` - Layout animation patterns (`layout`, `layoutId`) for expanding and crossfading elements ## Principles - Every pattern imports from `motion-foundations`. No raw numbers. - Every conditional render is wrapped in `AnimatePresence` with a `key`. …