도구

Implements page and route transitions in the Next.js App Router and fixes Framer Motion exit animations that never fire on navigation, using template.tsx with a pathname-keyed AnimatePresence and FrozenRouter, or the View Transitions API via next-view-transitions.

Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support.

Audits Motion (Framer Motion) code against AnimatePresence rules: wrapping conditional exits, exit props and keys, the useIsPresent and usePresence hooks, choosing a mode, and coordinating nested exits. Reports findings as file:line. For React projects.

Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion.

Audits animation code for the right timing function: springs for gestures and interruptible motion, easing for system-driven state changes, linear for progress, and no animation for high-frequency interactions. Also checks spring parameters and durations. Reports file:line findings.