motion-dev-animations

name	motion-dev-animations
description	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 animations, animated UI, micro-interactions, page transitions, or layout animations. Generates production TypeScript/JSX code with accessibility (prefers-reduced-motion) and performance validation (≥60fps). Supports entrance animations, gesture interactions (hover/tap/drag), scroll-based reveals, and layout transitions using spring physics and natural timing. Do NOT use for CSS-only transitions (use native CSS), static sites without JavaScript, Vue animations (use motion-v variant instead), or SVG/Canvas complex animations (GSAP better suited).
allowed-tools	Read, Write, Edit, Bash, Glob, Grep
metadata	{"version":"3.0.0","author":"Motion Dev Standards","tags":["motion","framer-motion","animation","react","nextjs","svelte","astro","gestures","scroll","parallax","microinteractions","spring-physics","layout-animations"],"min_claude_version":"3.5","created":"2025-11-07","updated":"2025-11-08","optimization":"Research-backed: imperative language, few-shot (3 examples), layered complexity, progressive loading"}

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

INPUT: What should animate?

├─ ENTRANCE (page load, mount)
│   → Pattern: initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}
│   → Timing: 0.6-0.8s, ease: [0.22, 1, 0.36, 1]
│   → Stagger: 0.1-0.2s between elements
│   → Example: ./examples/hero-fade-up.md
│
├─ GESTURE (hover, tap, drag)
│   → Pattern: whileHover={{scale: 1.05}}, whileTap={{scale: 0.95}}
│   → Physics: Spring (stiffness: 300-400, damping: 20)
│   → Timing: Instant response (no duration)
│   → Examples: ./examples/card-hover.md, ./examples/magnetic-button.md
│
├─ SCROLL (reveal, parallax)
│   → Pattern: whileInView + viewport OR useScroll + useTransform
│   → Trigger: viewport={{once: true, amount: 0.3}}
│   → Performance: Transform/opacity only
│   → Examples: ./examples/scroll-reveal.md, ./examples/parallax-layers.md
│
└─ LAYOUT (reorder, expand)
    → Pattern: layout prop (auto FLIP)
    → Shared: layoutId="id" for morphing
    → Caveat: Only animates transforms

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

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 - Classic Apple-style entrance
• Hero Stagger - Orchestrated elements
• Hero Split Text - Character reveal

Scroll Effects

• Scroll Reveal - Intersection Observer fade-in
• Parallax Layers - Multi-speed depth
• Scroll Progress - Reading indicator

Gestures & Interactions

• Card Hover - Elegant lift + shadow
• Magnetic Button - 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 - All components, hooks, props
• Spring Physics Guide - 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 - Hero + features + testimonials
• Component Library - 10+ reusable components
• Scroll Template - Parallax + reveal patterns
• Dashboard Template - Interactive cards, charts

Installation

# React/Next.js/Svelte/Astro
npm install motion

# Vue
npm install motion-v

Common Patterns (Copy-Paste Ready)

Pattern 1: Fade Up Entrance

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

Pattern 2: Hover Card

<motion.div
  whileHover={{ y: -8, boxShadow: "0 20px 40px rgba(0,0,0,0.12)" }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

Pattern 3: Scroll Reveal

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
/>

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 - JSON schema
• Validation Script - 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