Why This Exists

Motion.dev has 10M+ downloads per month. It is the standard for web animations in React, Next.js, Svelte, and Astro. But writing good animations is hard. You need spring physics, GPU-accelerated properties, prefers-reduced-motion support, and 60fps+ performance targets.

This skill gives Claude Code deep knowledge of Motion.dev patterns so it can generate production animation code from natural language. No more copying from docs. No more guessing spring values. Just describe what you want.

Install

Add to your Claude Code skills directory:

# Clone into your skills folder
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

# Or add as a git submodule in your project
git submodule add https://github.com/199-biotechnologies/motion-dev-animations-skill.git .claude/skills/motion-dev-animations

The skill activates automatically when you mention animations, Motion.dev, scroll effects, parallax, hover effects, or interactive UI in your prompts.

Quick Start

Once installed, use natural language with Claude Code:

"Create a hero section with a fade-up entrance animation"
"Add parallax scrolling to this landing page"
"Build a card component with hover lift and shadow effects"
"Implement drag-to-reorder for this list"
"Add a magnetic button effect to the CTA"

Claude Code will clarify your framework, plan the animation strategy, generate the code, and verify performance.

How It Works

The skill follows a four-step workflow:

1. Clarify -- Determines your framework (React 19+, Next.js 15+, Svelte 5+, Astro 4+), animation type, and design goals.
2. Plan -- Selects the right Motion.dev patterns, spring physics, and easing curves for your use case.
3. Implement -- Generates TypeScript/JSX code using GPU-accelerated properties (transform, opacity, filter only). No layout thrashing.
4. Verify -- Checks for 60fps+ performance, prefers-reduced-motion support, keyboard navigation, and bundle size under 50KB.

The skill uses progressive loading. The core instructions are ~2,000 tokens. Examples, API reference, and templates load on-demand only when needed. This means 87% less context consumption compared to loading everything upfront.

Animation Types

Entrance Animations

• Hero Fade Up -- Apple-style fade + slide entrance for landing pages
• Hero Stagger -- Orchestrated title, subtitle, CTA sequence
• Scroll Reveal -- Intersection Observer fade-in on scroll

Scroll Effects

• Parallax Layers -- Multi-speed depth effect with useScroll and useTransform
• Scroll Progress -- Reading progress bar tied to scroll position

Gesture Interactions

• Card Hover -- Lift with shadow using whileHover
• Magnetic Button -- Cursor-following effect for CTAs
• Drag Carousel -- Touch-friendly horizontal slider with drag constraints

Micro-interactions

• Button Press -- Tactile tap feedback with whileTap
• Toggle Switch -- Smooth state transitions with layout animations
• Loading Spinner -- Spring-based loader animation

Layout Animations

• List Reorder -- Drag-to-reorder with FLIP technique
• Accordion -- Smooth expand/collapse with AnimatePresence
• Tab Switch -- Shared layout transitions with layoutId

What's Inside

motion-dev-animations-skill/
├── SKILL.md                          # Core instructions (~2,000 tokens)
├── examples/                         # Animation patterns (loaded on-demand)
│   ├── hero-fade-up.md               # Apple-style entrance animation
│   ├── scroll-reveal.md              # Intersection Observer reveals
│   ├── card-hover.md                 # Hover lift + shadow effect
│   ├── parallax-layers.md            # Multi-speed parallax
│   ├── magnetic-button.md            # Cursor-following button
│   └── example-config.json           # Sample motion config
├── reference/                        # API docs (loaded on-demand)
│   ├── api-reference.md              # Full Motion.dev API
│   └── spring-physics.md             # Spring values and presets
├── templates/                        # Starter code
│   ├── nextjs-page.tsx               # Full page with animations
│   └── component-library.tsx         # Reusable animation components
├── schema/                           # Validation
│   └── motion-config.schema.json     # JSON schema for configs
└── scripts/                          # Tools
    └── validate_motion_config.py     # Config validator

Performance Standards

Every animation this skill generates meets these targets:

Framework Support

Contributing

See CONTRIBUTING.md for guidelines. The short version: add examples in examples/, expand API docs in reference/, or create templates in templates/.

License

MIT