motion-advanced

The motion-advanced skill provides advanced motion patterns for React and Next.js using the Motion library (motion/react), covering drag and drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences with useAnimate, loaders, and a full API decision tree. It handles complex, interactive, and physics-based animation that goes beyond simpler pattern skills, and it requires motion-foundations to be set up first because all token values are imported from that skill rather than written as inline numbers.

The skill produces concrete outputs: 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 with pathLength, icon morph, stroke progress ring), custom hooks (useScrollReveal, useHoverScale, useNavigationDirection, useInViewOnce), imperative useAnimate sequences with interrupt-safe async/await, and loaders (spinner, shimmer, pulse dot, progress bar, button loading state). Its principles favor physics-based motion via useSpring for direct manipulation, useMotionValue plus useTransform for derived values without re-renders, and SSR-safe motion values that avoid hydration errors. Decision tables guide choosing the right API — for example drag plus dragTransition: springs.release for physics on release, Reorder.Group/Reorder.Item for ordered lists, drag="y" with an onDragEnd offset check for dismissal, and useAnimate for multi-step sequences.

The skill targets frontend developers building sophisticated interactive UI in React/Next.js. It enforces explicit rules: drag interactions must be tested on touch devices, infinite animations must pause when document.visibilityState is hidden, swipe thresholds must combine offset and velocity rather than velocity alone, the useAnimate scope ref must attach to a mounted DOM element, motion values must not be recreated on render, custom hooks must clean up their event listeners, and SVG morphing requires equal path command counts or paths snap instead of interpolating. Its primary stated requirement is a working motion-foundations setup supplying tokens such as springs.* and motionTokens.