Creates sophisticated, hardware-accelerated React animations and gestures using the Motion library.
This skill provides specialized guidance for implementing production-grade React animations using Motion (formerly Framer Motion). It assists developers in building complex UI interactions—including drag-and-drop, scroll-linked effects, layout transitions, and SVG path morphing—while optimizing for performance. By leveraging techniques like LazyMotion and useAnimate, it helps maintain small bundle sizes while ensuring compatibility with modern frameworks like Next.js 15, Vite, and Cloudflare Workers.
Key Features
01Pre-configured patterns for Next.js App Router and React 19 Server Components.
02Declarative gestures including drag, hover, and tap with cross-device support.
03Advanced bundle optimization using LazyMotion (4.6 KB) and useAnimate mini (2.3 KB).
04Hardware-accelerated scroll-linked and viewport-triggered animations.
0591 GitHub stars
06Automatic layout transitions and shared element effects via the FLIP technique.
Use Cases
01Creating high-performance scroll reveal effects and parallax headers for marketing sites.
02Implementing seamless page transitions and shared element hero animations between routes.
03Building interactive drag-and-drop interfaces like Kanban boards or sortable lists.
