Motion Advanced

This is where you go after motion-patterns stops being enough. It covers drag interactions, gesture detection, text animations that reveal word by word or count up, SVG path drawing, and imperative sequences with useAnimate. The custom hooks section is especially practical: scroll reveals, hover effects, navigation direction detection. The decision tree is helpful for picking between useSpring and spring transitions, and the drag examples cover both simple draggable cards and full drag-to-dismiss sheets with proper offset and velocity thresholds. If you're building reorderable lists, swipeable carousels, or loading states that feel polished, this has the patterns you need.

skills.sh installs: 1.7K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --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