What problem does it solve? Adding animations to a React or Next.js app often results in inconsistent durations, janky page transitions, missing exit animations, and broken experiences for users who prefer reduced motion. This Skill provides a structured protocol for designing a coherent motion system with Framer Motion so every animation is purposeful, performant, and accessible. ## Core Features & Use Cases - Motion Token System: Centralized duration, spring, and easing tokens (80ms–400ms) so all animations share one consistent timing language. - Production Patterns: Ready-to-adapt implementations for hover/press micro-interactions, modals with AnimatePresence, staggered list entrances, scroll-driven parallax, animated number counters, drag-to-dismiss gestures, and Next.js App Router page transitions. - Reduced-Motion Accessibility: A useMotionSafe hook pattern that guarantees every animation has an instant no-motion fallback when prefers-reduced-motion is set. - Use Case: A developer building a Next.js dashboard needs page transitions, a staggered card list, and an animated stats counter. The Skill supplies the MotionProvider setup with LazyMotion, the page transition wrapper, and the spring-based counter, all passing the reduced-motion quality gates. ## Quick Start Ask the AI to set up Framer Motion page transitions and staggered list animations in your Next.js App Router project with reduced-motion support.
