Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects. Use when user requests animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animat

Motion Dev Animations Motion.dev 10M+ downloads/month, successor to Framer Motion 120fps GPU accelerated animations for React, Next.js, Svelte, Astro, Vue Purpose Generate production grade animations using Motion.dev following Apple/Jon Ive principles: Purposeful (serves function) Smooth (120fps) Accessible (reduced motion) Performant (GPU only) Elegant (subtle) Consistent (unified timing) When to Use ✅ Use for : React 19+/Next.js 15+/Svelte 5+/Astro 4+ animation implementation Scroll effects (parallax, reveal), gestures (hover, drag, tap), layout animations Hero sections, cards, micro interactions requiring 60fps+ performance Projects needing spring physics, natural motion, accessibility ❌ Don't use for : CSS only transitions (use native transition property) Static sites without JavaScript frameworks Vue projects (use motion v package different API) SVG/Canvas complex animations (GSAP better suited) Form only CRUD apps (overkill) Workflow: Clarify → Plan → Implement → Verify Step 1: Clarify Requirements Determine project context and animation goals: Framework (React 19+, Next.js 15+, Svelte 5+, Astro 4+) Animation type (entrance, gesture, scroll, layout) Design goal (subtle, prominent, playful, professional) Performance constraints (target device, bundle limits, accessibility requirements) Trigger mechanism (mount, viewport, user interaction) Step 2: Plan Animation Strategy Define implementation approach: Components to animate (headers, cards, buttons, sections) Motion patterns (fade, slide, scale, spring, parallax) Timing specifications (duration, delay, stagger intervals) Physics parameters (stiffness: 300 400, damping: 20, mass: 1) Accessibility fallbacks (prefers reduced motion alternatives) Step 3: Implement in Phases Build animations incrementally: Setup : Install Motion.dev, configure imports, prepare component structure Core Animation : Apply motion properties (initial, animate, transition) Refinement : Tune timing, easing curves, spring physics for natural feel Accessibility : Add reduced motion detection, keyboard navigation support Optimization : Verify GPU acceleration, minimize bundle size, test performance Step 4: Verify Quality Standards Check against requirements: Performance : ≥60fps (Chrome DevTools → Performance tab) Layout Stability : CLS = 0 (Lighthouse audit) Accessibility : Honors prefers reduced motion (system settings test) Keyboard Navigation : All interactive elements keyboard accessible Mobile Responsive : Touch friendly gestures, tested on iOS/Android Animation Pattern Decision Tree API Quick Reference Component/Hook Usage When motion.div <motion.div animate={{x: 100}} Basic animations whileHover whileHover={{scale: 1.05}} Hover states (0.2 0.3s) whileTap whileTap={{scale: 0.95}} Click feedback whileInView whileInView={{opacity: 1}} Scroll reveal drag drag="x" dragConstraints Draggable elements layout <motion.div layout / Auto FLIP animation useScroll Track scroll progress Parallax, progress bars useTransform Map values Scroll linked effects useSpring Spring physics Smooth value changes useInView Viewport detection Trigger animations Full API : See [Complete API Reference](./reference/api reference.md) Framework Integration Framework Import Components Exit Animations React/Next.js "motion/react" <motion.div <AnimatePresence Svelte "motion" Vanilla API N/A Astro "motion" Client scripts N/A Vue "motion v" <motion.div Similar to React Quality Standards Category Requirement How to Verify Performance ≥60fps Chrome DevTools → Performance GPU accel transform/opacity only No width/height/left/top Bundle <50KB webpack bundle analyzer Accessibility prefers reduced motion System settings test Mobile Touch friendly iOS/Android testing Layout shift CLS = 0 Lighthouse audit Examples Library (Progressive Loading) Load on demand based on animation type: Hero Sections [Hero Fade Up](./examples/hero fade up.md) Classic Apple style entrance Hero Stagger Orchestrated elements Hero Split Text Character reveal Scroll Effects [Scroll Reveal](./examples/scroll reveal.md) Intersection Observer fade in [Parallax Layers](./examples/parallax layers.md) Multi speed depth Scroll Progress Reading indicator Gestures & Interactions [Card Hover](./examples/card hover.md) Elegant lift + shadow [Magnetic Button](./examples/magnetic button.md) Cursor following Drag Carousel Touch slider Layout Animations List Reorder Drag to reorder FLIP Accordion Expand/collapse Tab Switch Shared layout Full examples : All files in ./examples/ directory Reference Documentation (Load On Demand) [Complete API Reference](./reference/api reference.md) All components, hooks, props [Spring Physics Guide](./reference/spring physics.md) Tuning stiffness, damping, mass Performance Optimization GPU, will change, lazy loading Accessibility Guide Reduced motion, keyboard, screen readers Troubleshooting Common issues, solutions Framer Motion Migration Upgrade guide Templates (Production Ready) [Next.js Page Template](./templates/nextjs page.tsx) Hero + features + testimonials [Component Library](./templates/component library.tsx) 10+ reusable components Scroll Template Parallax + reveal patterns Dashboard Template Interactive cards, charts Installation Common Patterns (Copy Paste Ready) Pattern 1: Fade Up Entrance Pattern 2: Hover Card Pattern 3: Scroll Reveal More patterns : Staggered lists, exit animations, layout transitions → ./examples/ directory Error Handling Issue Solution Animation doesn't trigger Check initial ≠ animate values Poor performance Use transform/opacity only + will change CSS Layout shift Set explicit dimensions, use layout prop Exit not working Wrap with <AnimatePresence , add key prop Implementation Best Practices 1. Start simple → Build from fade + slide, add complexity incrementally 2. Extract variants → Define animation states as named variants for maintainability 3. Prefer spring physics → Default to spring transitions (more natural than tween) 4. Stagger list items → Use staggerChildren (0.1 0.2s) for rhythm and hierarchy 5. Test mobile thoroughly → Verify touch gestures, performance on iOS/Android devices 6. Include reduced motion → Always provide prefers reduced motion fallback animations 7. Profile performance → Use Chrome DevTools Performance tab, target ≥60fps Design Philosophy (Apple/Jon Ive Principles) Apply these design principles to all animations: Simplicity : Use 200 400ms durations, minimize simultaneous motion, prefer transform properties Natural Physics : Implement spring based transitions, avoid linear easing, apply mass based movement Purposeful Motion : Guide user attention, provide interaction feedback, establish visual hierarchy Elegant Restraint : Apply "less is more" principle, maintain consistent timing, respect user motion preferences Validation For structured output validation, see: [Motion Config Schema](./schema/motion config.schema.json) JSON schema [Validation Script](./scripts/validate motion config.py) Automated checks Metadata Version : 3.0.0 (Research Backed Optimization) Optimization : Imperative language, few shot patterns (3 examples), layered complexity, progressive loading Token Efficiency : 87% core reduction (15K → 2K) + auto caching Motion.dev : v11+ Frameworks : React 19+, Next.js 15+, Svelte 5+, Astro 4+, Vue 3+ Research : arXiv 2402.07927v1, 2211.01910, 2310.14735v5, PubMed 40334089 License : MIT

motion-dev-animations