Implements production-ready React animations and interactive motion design using the Framer Motion library.
This skill provides Claude with standardized patterns for creating sophisticated UI animations in React and Next.js applications using Framer Motion. It covers core concepts like variants and AnimatePresence, as well as complex interactions like scroll-linked effects, shared element transitions, and gesture-based movements. By leveraging these patterns, developers can ensure their animations are performant, accessible by respecting reduced motion preferences, and compatible with modern React architectures including Server Components.
Características Principales
01Standardized animation variants for consistent UI behavior across components
02Accessibility-first design with built-in support for reduced motion detection
03Seamless page and layout transitions optimized for Next.js App Router
040 GitHub stars
05Advanced gesture interactions including physics-based drag and spring-based hover effects
06Performance optimization patterns using GPU-accelerated transforms and will-change hints
Casos de Uso
01Implementing shared element transitions between list and detail views in a web app
02Building interactive dashboard elements with stagger animations and layout groups
03Creating high-performance scroll-linked parallax effects for marketing landing pages
