Motion Advanced

Once you've got the basics down with motion-foundations, this is where you build the interactive stuff that actually feels good to use. Drag-to-dismiss sheets, reorderable lists, swipe gestures, SVG path animations, and text reveals that don't just fade in boringly. The decision tree is genuinely helpful for picking between useSpring and spring transitions, or knowing when to reach for useAnimate versus the declarative API. The rules are opinionated in a good way: explicit swipe thresholds, pause infinite animations in background tabs, test drag on touch devices not just mouse. It's built for React and Next.js projects where motion-patterns isn't enough and you need physics-based interactions or imperative control.

skills.sh installs: 5.6K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill motion-advanced --agent claude-code

Installs into .claude/skills of the current project.

Files

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