Motion Advanced
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of motion-advanced by affaan-m - installs and ranking accrue to the original listing.
motion-advanced is an ECC frontend skill that adds complex drag-and-drop, gesture, text-reveal, SVG path, and imperative animation patterns for developers building advanced React and Next.js interfaces.
About
motion-advanced is a skill from affaan-m/ecc in the Everything Claude Code collection, focused on advanced Motion-powered interactions for React and Next.js UIs. The published readme notes the public file is a Japanese translation placeholder and points to the original English SKILL.md for full guidance on drag-and-drop, gesture handling, text reveals, SVG path animations, and imperative animation control. Developers reach for motion-advanced when standard fade or slide transitions are insufficient and interfaces need physics-based dragging, gesture-driven states, or path-based SVG motion. The skill complements baseline motion-ui guidance by covering higher-complexity interaction patterns during active frontend implementation.
- Requires motion-foundations as a prerequisite before activation
- Produces draggable cards, drag-to-dismiss sheets, and Reorder.Group lists
- Generates word-by-word, character-by-character, and live counter text animations
- Creates SVG path draw-on, icon morphing, and stroke progress rings
- Delivers 7+ custom hooks including useScrollReveal, useHoverScale, useInViewOnce and useAnimate sequences
Motion Advanced by the numbers
- 1,434 all-time installs (skills.sh)
- +92 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill motion-advancedAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you build advanced Motion animations in React?
Add complex drag-and-drop, gesture, text-reveal, SVG path, and imperative animation patterns to React and Next.js interfaces.
Who is it for?
Frontend engineers implementing complex Motion interactions in React or Next.js beyond basic transitions.
Skip if: Developers who only need simple fade transitions or projects without React, Next.js, or Motion animation requirements.
When should I use this skill?
The user asks for drag-and-drop animation, gesture handlers, SVG path motion, text reveal effects, or imperative Motion APIs in React.
What you get
Gesture-driven components, drag-and-drop interactions, SVG path animations, and imperative Motion animation patterns.
- Gesture-driven components
- SVG path animations
- Drag-and-drop interaction code
Files
motion-advanced - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/motion-advanced/SKILL.md
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kHow it compares
Use motion-advanced for complex interactions; pair with motion-ui when you first need an accessible baseline motion system.
FAQ
What does motion-advanced cover?
motion-advanced covers complex Motion patterns for React and Next.js, including drag-and-drop, gestures, text reveals, SVG path animation, and imperative animation APIs for advanced interface work.
How is motion-advanced different from motion-ui?
motion-advanced targets complex interaction patterns like dragging, gestures, and SVG paths, while motion-ui focuses on a consistent accessible baseline motion system for everyday React and Next.js UI.