motion-advanced
Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/motion-advanced/SKILL.md
- License
- MIT
- Jobs
- Guardrails
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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` …