Motion Patterns
Production animation patterns for React and Next.js with Muse: buttons, modals, toasts, stagger, page transitions, and scroll reveals, built on shared tokens and springs.
- What
- Production animation patterns for React and Next.js with Muse: buttons, modals, toasts, stagger, page transitions, and scroll reveals, built on shared tokens and springs.
- Cost
- Free
- Needs
- Use "Motion Patterns" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: copy-paste animation patterns that make Muse animate React and Next.js interfaces like a motion designer. Covers the everyday needs: button feedback, stagger lists, modals, toast stacks, page transition wrappers for the Next.js App Router, scroll reveals and scroll-linked progress, expanding cards, accordions, and shared-element crossfades with layoutId. Every pattern is built on shared motion-foundations tokens and springs, with eight hard rules: always wrap conditional renders in AnimatePresence with a key, always define exit alongside initial and animate, use mode="wait" for page transitions, never use layout on large subtrees, keep stagger between 0.05s and 0.10s, modals always include focus trap, Escape close, scroll lock and dialog roles, scroll reveals use viewport once, and no inline numbers ever. Includes a decision table for picking the right pattern, the AnimatePresence contract explained (wrap, key, exit prop, miss one and exits silently fail), and an anti-pattern table mapping each mistake to its rule and fix. Original patterns by jeff, adapted here. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: the patterns import from motion-foundations, set up those tokens and springs first or nothing compiles; drag, gestures, SVG and text animations are explicitly out of scope (see motion-advanced). Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "Motion Patterns" with your Muse. Prerequisites: none to install. Pure guidance; a React/Next.js project with motion/react and the motion-foundations tokens helps. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/motion-patterns/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Animate this: [describe the component, e.g. a modal with proper exit]. Follow the eight rules." 3. Ask it to pick the right pattern from the decision table and to define exit alongside every enter animation. Tip: ask "check my AnimatePresence usage against the contract: wrap, key, exit prop." Safety: a skill is plain-text instructions; it runs nothing by itself. Test animations with reduced-motion preferences on.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.