Motion Animation for React

Acerca de

The Motion skill empowers Claude to build sophisticated, production-ready React animations using the Framer Motion library. It provides expert guidance on complex interactions like drag-and-drop, scroll-linked parallax effects, and smooth layout changes via the FLIP technique. With built-in best practices for performance optimization (LazyMotion) and accessibility (prefers-reduced-motion), this skill ensures your animations are both visually stunning and technically sound across modern frameworks like Next.js 15, Vite, and Tailwind v4.

Características Principales

• Physics-based spring animations for natural, responsive motion
• Declarative gesture support for drag, hover, tap, and pan interactions
• Bundle size optimization techniques including LazyMotion and useAnimate
• Advanced scroll-linked and viewport-triggered animation patterns
• Automatic layout transitions using the FLIP technique and shared elements
• 21 GitHub stars

Casos de Uso

• Implementing smooth route transitions and shared element animations in Next.js applications
• Creating interactive dashboard components like draggable Kanban cards or sortable lists
• Building immersive landing pages with parallax layers and scroll-triggered reveals