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. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.
- installs 8w
- 1,577
- 30-day movement
- starts with the next reading
- Related entries
- 3
- Connections
- 0
An agent skill (SKILL.md) covering advanced Motion animation patterns for React and Next.js: drag & drop, gestures, text and SVG animations, custom hooks, useAnimate imperative sequences, and an API decision tree. It requires the motion-foundations skill to be set up first and provides rules, principles, and code examples such as drag-to-dismiss sheets and reorderable lists.
Reach for it when motion-patterns is not enough and you need physics-based, interactive, or imperative animation patterns in React or Next.js.
Use it to
- Build drag-to-dismiss sheets and reorderable lists
- Add swipe gestures and long-press hooks
- Animate text word-by-word or as a number counter
- Draw SVG paths and stroke progress rings
- Create imperative interrupt-safe sequences with useAnimate
For React/Next.js developers using Motion with an AI coding agent
- Host repository
- affaan-m/ECC
- Category
- frontend
- Version
- 1.0.0
- Installs, lifetime
- 3,000
- Installs, 8 weeks
- 1,577
- Host stars
- 261k
- Host language
- JavaScript