motion-dev-animationslisted

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).
whimzyLive/nightshift-ai · ★ 3 · Web & Frontend · score 74

Install: claude install-skill whimzyLive/nightshift-ai

# 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 Anima