AI SummaryGenerate production-grade animations using Motion.dev following Apple/Jon Ive principles: ❌ Don't use for: Determine project context and animation goals:
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "motion-dev-animations" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/motion-dev-animations-skill && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/motion-dev-animations-skill/SKILL.md "https://raw.githubusercontent.com/199-biotechnologies/motion-dev-animations-skill/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
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).
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)
Examples Library (Progressive Loading)
Load on-demand based on animation type:
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)
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster