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.
- installs 8w
- 1,789
- 30-day movement
- starts with the next reading
- Related entries
- 3
- Connections
- 0
An agent skill providing copy-paste animation patterns for React and Next.js UI elements like buttons, modals, toasts, staggers, page transitions, and scroll effects. All patterns are built on motion-foundations tokens and springs, with rules around AnimatePresence and reduced-motion support.
When your agent needs to animate a specific React or Next.js UI element, this skill supplies ready-made, principled patterns instead of ad-hoc animation code.
Use it to
- Animate button, card, modal, or toast feedback
- Build staggered list entrances
- Set up Next.js App Router page transitions
- Add scroll reveal or scroll progress effects
- Implement shared-element crossfades and expanding cards
For React and Next.js developers adding UI animations via AI coding agents
- Host repository
- affaan-m/ECC
- Category
- frontend
- Version
- 1.0.0
- Installs, lifetime
- 3,000
- Installs, 8 weeks
- 1,789
- Host stars
- 261k
- Host language
- JavaScript