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.
npx skills add mturac/everything-openai-codex --skill motion-advanced --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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` - Loader components: spinner, shimmer, pulse dot, progress bar,
- When to Activate
- Outputs
- Principles
- Rules
- Decision Guidance
- Choosing the right advanced API
- When to use useSpring vs a spring transition
- Core Concepts
- useMotionValue + useTransform
- useAnimate
- Code Examples
- Draggable card
- Drag-to-dismiss sheet
- Reorderable list
What does the motion-advanced skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill motion-advanced --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.