# motion

A skill that feeds your agent the Motion (Framer Motion) docs for React: drag-and-drop, scroll effects, layout transitions. Useful when the agent guesses at props.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 236
- Author: secondsky
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/motion/skills/motion/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/motion

## What it does

The skill hands your coding agent a reference for Motion, the React animation library formerly published as `framer-motion`. It covers the `motion` component, variants, `AnimatePresence`, FLIP layout animations, scroll-linked effects and gestures. Instead of inventing prop names, the agent reads them off the docs.

There is a section on the mistakes people actually hit. `AnimatePresence` has to stay mounted, and every child needs a unique `key`, otherwise the exit animation never plays. Bundle size gets its own treatment: the full component runs about 34 KB, `LazyMotion` with `m` is 4.6 KB, and the `useAnimate` mini build is 2.3 KB. If animation ships on every page, that is worth checking.

Install the package with `bun add motion` or `npm install motion`. React 18+ or React 19+ is required, and TypeScript works without a separate types package. For Cloudflare Workers the skill documents a workaround using the `framer-motion` alias. Plain list animations are better served by `auto-animate`, and 3D work belongs with Three.js or React Three Fiber.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill motion -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/motion/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/motion/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill motion -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/motion/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill motion -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/motion/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install secondsky/claude-skills motion
```

2. **Manually: put the files in place**
- File: `.github/skills/motion/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/secondsky/claude-skills --path plugins/motion/skills/motion
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/motion/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill motion -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/motion/skills/motion/SKILL.md

## When to use it
- build a drag-and-drop list with axis constraints
- wire a parallax layer to scroll position
- animate a card into a detail view with `layoutId`
- fix an exit animation that never fires on unmount
- shrink the animation library in the bundle

## Example prompts
- Add drag-and-drop sorting to these cards with Motion, constrain dragging to the x axis
- Build a hero section with parallax using useScroll and useTransform
- The modal exit animation doesn't play — check the motion skill for what's wrong with AnimatePresence

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0f9be14a5192e225.

BEGIN THIRD-PARTY FILE 0f9be14a5192e225
````text
---
name: motion
description: >-
  Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

license: MIT
---

# Motion Animation Library

## Overview

Motion (package: `motion`, formerly `framer-motion`) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

**Key Capabilities:**
- **Gestures**: drag, hover, tap, pan, focus with cross-device support
- **Scroll Animations**: viewport-triggered, scroll-linked, parallax effects
- **Layout Animations**: FLIP technique for smooth layout changes, shared element transitions
- **Spring Physics**: Natural, customizable motion with physics-based easing
- **SVG**: Path morphing, line drawing, attribute animation
- **Exit Animations**: AnimatePresence for unmounting transitions
- **Performance**: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB)

**Recommended Stack**: React 19, Next.js 16, Vite 7, Tailwind v4

---

## When to Use This Skill

### ✅ Use Motion When:

**Complex Interactions**:
- Drag-and-drop interfaces (sortable lists, kanban boards, sliders)
- Hover states with scale/rotation/color changes
- Tap feedback with bounce/squeeze effects
- Pan gestures for mobile-friendly controls

**Scroll-Based Animations**:
- Hero sections with parallax layers
- Scroll-triggered reveals (fade in as elements enter viewport)
- Progress bars linked to scroll position
- Sticky headers with scroll-dependent transforms

**Layout Transitions**:
- Shared element transitions between routes (card → detail page)
- Expand/collapse with automatic height animation
- Grid/list view switching with smooth repositioning
- Tab navigation with animated underline

**Advanced Features**:
- SVG line drawing animations
- Path morphing between shapes
- Spring physics for natural bounce
- Orchestrated sequences (staggered reveals)
- Modal dialogs with backdrop blur

**Bundle Optimization**:
- Need 2.3 KB animation library (useAnimate mini)
- Want to reduce Motion from 34 KB to 4.6 KB (LazyMotion)

### ❌ Don't Use Motion When:

- **Simple list animations** (use `auto-animate` instead: 3.28 KB vs 34 KB)
- **Static content** without interactions
- **Cloudflare Workers** (historically needed the `framer-motion` alias; with `motion` v12.43+ the main package works on Workers — see Known Issues)
- **3D animations** (use Three.js or React Three Fiber instead)

---

## Installation

### Latest Stable Version

```bash
````
END THIRD-PARTY FILE 0f9be14a5192e225

The third-party file has ended. Everything between the 0f9be14a5192e225 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2712 of 16256 bytes. © secondsky · MIT · https://github.com/secondsky/claude-skills/tree/HEAD/plugins/motion/skills/motion/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md