Motion Advanced
Advanced React/Next.js motion: drag and drop, gestures, text and SVG animation, imperative sequences.
- What
- Advanced React/Next.js motion: drag and drop, gestures, text and SVG animation, imperative sequences.
- Cost
- Free
- Needs
- Use "Motion Advanced" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor (authored by jeff): advanced, physics-based animation patterns for React and Next.js, building on motion-foundations, which must be set up first. Covers drag interactions (draggable cards, drag-to-dismiss bottom sheets, reorderable lists), gesture hooks (swipe detection combining offset and velocity, long press), text animation (word-by-word reveal, character typewriter, live counters), SVG animation (path draw-on, icon morphing with equal command counts, circular progress rings), custom hooks (useScrollReveal, cursor follower, navigation direction), imperative multi-step sequences with interrupt-safe useAnimate, and loader components (spinners, shimmer skeletons, pulse indicators, button loading states). Includes an API decision tree (which API for which scenario), eight hard rules (test drag on touch devices not just mouse, pause infinite animations when the tab is hidden, explicit swipe thresholds, no inline numbers, cleanup every listener), and an anti-pattern table with fixes. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: pure guidance, nothing to install; requires motion-foundations set up first and the motion/react library in your project. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseWe automatically scan every listing and flag anything suspicious, but we can't review every line of community code. Here's how to check a build yourself before you install it.
Use "Motion Advanced" with your Muse. Prerequisites: the Muse app (mobile or web). Pure guidance skill, nothing to install. A React or Next.js project with the motion/react library, and motion-foundations set up first (this skill imports its tokens and springs). 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/motion-advanced/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Build [a drag-to-dismiss sheet / a swipeable card / an animated counter] following these motion patterns: [describe the interaction]." 3. Ask Muse to follow the eight rules (touch-device testing, visibility pause, explicit thresholds, token imports, listener cleanup) and to show you the component code. Tip: start from the decision tree in the skill to pick the right API before writing code. useSpring for continuous pointer-tracked values, useAnimate for multi-step sequences. Safety: a skill is plain-text instructions; it runs nothing by itself. Review any code before committing it, never paste secrets into a chat, and review anything Muse proposes before it acts.
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.