Motion Advanced
Install this when your React or Next.js product needs drag-and-drop, gestures, SVG motion, or imperative animation sequences beyond basic motion-patterns.
Overview
motion-advanced is an agent skill for the Build phase that implements advanced Motion (React/Next.js) patterns—gestures, SVG animation, custom hooks, and useAnimate sequences—for solo builders polishing interactive UI.
Install
npx skills add https://github.com/affaan-m/everything-claude-code --skill motion-advancedWhat is this skill?
- Drag interactions: draggable cards, drag-to-dismiss sheets, and Reorder.Group lists
- Gesture hooks for swipe detection, long press, and pinch-style interactions
- Text animation components: word reveal, character typewriter, and number counter
- SVG path draw-on, icon morph, and stroke-based progress rings
- Custom hooks (useScrollReveal, useHoverScale, useNavigationDirection, useInViewOnce) plus interrupt-safe useAnimate sequ
- Requires motion-foundations before use (v1.0)
- Six output families: drag, gestures, text, SVG, custom hooks, useAnimate loaders
- Activates when motion-patterns is not enough for the interaction
Adoption & trust: 1.1k installs on skills.sh; 210k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React or Next.js app needs drag, gesture, text, SVG, or sequenced motion beyond basic transitions, but ad-hoc Framer Motion snippets are hard to keep consistent and interrupt-safe.
Who is it for?
Solo builders shipping a React or Next.js SaaS or app who already completed motion-foundations and need production-grade gestures, SVG motion, or imperative animation sequences.
Skip if: Teams skipping motion-foundations, non-React stacks, or pages that only need simple enter/exit transitions (use motion-patterns instead).
When should I use this skill?
Building drag-to-dismiss sheets, swipe gestures, or reorderable lists; animating text word-by-word or counters; drawing SVG paths or progress rings; writing custom motion hooks; sequencing animations with useAnimate; or
What do I get? / Deliverables
You get documented advanced Motion patterns—drag sheets, gesture hooks, text/SVG components, custom hooks, and useAnimate loaders—ready to drop into your frontend after motion-foundations is set up.
- Drag and reorder components (cards, sheets, Reorder.Group lists)
- Gesture and text/SVG animation components plus custom hooks
- Interrupt-safe imperative animation sequences and loading-state UI
Recommended Skills
Journey fit
The skill outputs interactive UI code—components, hooks, and loaders—meant to be implemented while building the product interface, not while researching, launching, or operating infra. Every activation path targets React/Next.js frontend motion (drag sheets, text reveal, SVG draw, useAnimate), which belongs on the frontend build shelf.
How it compares
Use after motion-foundations and motion-patterns when you need gestures, SVG draw-on, and useAnimate—not as a substitute for baseline Motion setup.
Common Questions / FAQ
Who is motion-advanced for?
It is for solo and indie builders using React or Next.js with Motion who want advanced UI interactions—drag, gestures, animated text/SVG, and loading states—without inventing patterns from scratch.
When should I use motion-advanced?
Use it during Build → frontend when you are implementing drag-to-dismiss sheets, reorderable lists, swipe or long-press gestures, word or character text motion, SVG path draws, custom scroll or hover hooks, or multi-step useAnimate sequences and loaders.
Is motion-advanced safe to install?
Review the Security Audits panel on this Prism catalog page for install context and any published audit results before trusting the skill in your agent workflow.
Workflow Chain
Requires first: motion foundations
SKILL.md
READMESKILL.md - Motion Advanced
# Motion Advanced Complex, interactive, and physics-based animation patterns. Requires `motion-foundations` to be set up first. Use these when `motion-patterns` is not enough. ## When to Activate - Building drag-to-dismiss sheets, swipe gestures, or reorderable lists - Animating text word-by-word, character-by-character, or as a live counter - Drawing SVG paths, morphing icons, or animating circular progress - Writing a custom animation hook (`useScrollReveal`, magnetic button, cursor follower) - Sequencing multi-step animations imperatively with `useAnimate` - Building spinners, shimmer skeletons, pulse indicators, or loading button states ## Outputs This skill produces: - Drag interactions: draggable cards, drag-to-dismiss sheets, `Reorder.Group` lists - Gesture hooks: swipe detection, long press, pinch outline - Text animation components: word reveal, character typewriter, number counter - SVG animation: path draw-on, icon morph, stroke progress ring - Custom hooks: `useScrollReveal`, `useHoverScale`, `useNavigationDirection`, `useInViewOnce` - Imperative sequences via `useAnimate` with interrupt-safe `async/await` - Loader components: spinner, shimmer, pulse dot, progress bar, button loading state ## Principles - Physics-based motion (`useSpring`, `springs.*`) always feels more natural than duration-based for direct manipulation. - `useMotionValue` + `useTransform` computes derived values without triggering re-renders. - `useAnimate` sequences are imperative and interrupt-safe — calling `animate()` mid-flight cancels the previous animation automatically. - Motion values (`useMotionValue`, `useSpring`) are SSR-safe and do not cause hydration errors. ## Rules 1. **Drag interactions must be tested on touch devices**, not just mouse. `drag` prop works on both but feel and threshold differ. 2. **Infinite animations must pause when `document.visibilityState === "hidden"`.** Background tabs must not consume GPU/CPU. 3. **Swipe threshold must be explicit.** Never infer intent from velocity alone; combine `offset` + `velocity` checks. 4. **`useAnimate` scope ref must be attached to a mounted DOM element.** Calling `animate()` before mount throws silently. 5. **Motion values must not be recreated on render.** `useMotionValue(0)` inside a component body is correct; `new MotionValue(0)` in a render is not. 6. **All token values are imported from `motion-foundations`.** No inline numbers. 7. **Custom hooks must handle cleanup.** Every `window.addEventListener` needs a matching `removeEventListener` in the `useEffect` return. 8. **SVG morphing requires equal path command counts.** Paths with different command structures snap instead of interpolating. ## Decision Guidance ### Choosing the right advanced API | Scenario | API | | ------------------------------ | -------------------------------- | | Drag with physics on release | `drag` + `dragTransition: springs.release` | | Ordered drag-to-reorder list | `Reorder.Group` + `Reorder.Item` | | Dismiss on drag offset | `drag="y"` + `onDragEnd` offset check | | Swipe left/right | `drag="x"` + `onDragEnd` offset check | | Long press | `useLongPress` hook | | Value smoothed over time | `useSpring` | | Value derived from another | `useTransform` | | Multi-step sequence | `useAnimate` with `async/await` | | One-shot imperative animation | `animate()` from `motion` | | Text entering word by word | Stagger on `inline-block` spans | | SVG drawing on | `pathLength` 0 → 1 | | SVG morph | `d` attribute tween (equal commands) | | Circular progress | `strokeDashoffset` tween | ### When to use `useSpring` vs a spring transition | | `u