Motion.dev Animations Skill MCP — Use Cases, Install & Live Demo

Why use it

Key features

Auto-activates on animation/Motion.dev prompts
Entrance, scroll, gesture, micro, and layout animation patterns
Honors prefers-reduced-motion by default
Targets 60fps+, <50KB bundle, zero layout shift
GPU-accelerated transforms; no jank from layout props

Live Demo

What it looks like in practice

motion-dev-animations-skill.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Motion.dev Animations Skill

Add a hero fade-up entrance with stagger

👤 Frontend devs tuning landing pages ⏱ ~15 min beginner

When to use: Your hero feels static and you want a polished load animation.

Prerequisites

React + Motion.dev — npm i motion
Skill installed — git clone into ~/.claude/skills/

Flow

Describe the effect

Add a staggered fade-up entrance to the hero's H1, subhead, and CTA. 60ms stagger.✓ Copied

→ Motion.dev code with motion.div, transition spring, delay via stagger
Reduced-motion fallback

Make sure prefers-reduced-motion skips the animation cleanly.✓ Copied

→ useReducedMotion hook or CSS media query applied

Outcome: A hero that feels alive without sacrificing accessibility.

Pitfalls

Animating properties that trigger layout (width, top) — Use transform (translate/scale) instead — GPU-accelerated, no CLS

Combine with: magic-ui-mcp

Build scroll-triggered reveals and parallax

👤 Design-forward frontend devs ⏱ ~25 min intermediate

When to use: Your long-form landing page needs sections that unfold on scroll.

Flow

Reveal on scroll

Animate each section as it enters the viewport (once, 30% threshold).✓ Copied

→ useInView with once + amount
Parallax foreground

Add a subtle parallax offset for the decorative foreground SVG.✓ Copied

→ useScroll + useTransform mapping scrollYProgress to y

Outcome: Scroll experience that adds depth without distraction.

Pitfalls

Parallax that causes motion sickness — Keep offsets small and skip entirely under prefers-reduced-motion

Build a draggable magnetic card with hover lift

👤 Interaction designers / frontend devs ⏱ ~20 min intermediate

When to use: Product card needs micro-interaction polish.

Flow

Hover lift

On hover: lift 4px, subtle shadow scale; spring back on leave.✓ Copied

→ whileHover with spring; GPU-friendly transforms
Magnetic drag

Make it draggable with elastic bounds, dragElastic 0.15.✓ Copied

→ drag + dragConstraints + dragElastic properly set

Outcome: A delightful card interaction without the perf cost.

Animate list reorder with layout

👤 Frontend devs building task boards / galleries ⏱ ~25 min intermediate

When to use: Your list reorders feel jarring; you want smooth transitions.

Flow

Enable layout on items

Add layout animations to the list items; animate enter/exit too.✓ Copied

→ <motion.li layout> + AnimatePresence
Reduced-motion

Disable layout animations under prefers-reduced-motion.✓ Copied

→ Conditional applied; instant reorder for users who asked for it

Outcome: Reorders that feel physical but respect user preferences.

Combinations

Pair with other MCPs for X10 leverage

motion-dev-animations-skill + magic-ui-mcp

Magic UI for pre-built components, motion.dev for the custom bits

Use Magic UI's marquee for logos; motion.dev for a custom scroll parallax below.✓ Copied

motion-dev-animations-skill + claude-design-auditor-skill

Audit motion for reduced-motion support

After adding animations, audit with scope=motion to catch reduced-motion regressions.✓ Copied

motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + animations in one flow

Convert the Figma frame; then add the specified hover and entrance animations.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
motion-dev (SKILL)	describe the animation (element + intent + constraints)	Anytime you want animation code, esp. with accessibility and perf constraints	0

Cost & Limits

What this costs to run

API quota: None
Tokens per call: Small for code; large only if you dump complex components
Monetary: Free
Tip: Describe the animation intent tightly — 'fade-up with 60ms stagger, 200ms duration' beats 'make it nice'.

Security

Permissions, secrets, blast radius

Credential storage: None

Data egress: None from the skill; network not involved

Generated animation code is only as safe as your review — check reduced-motion and layout-prop choices before shipping.

Troubleshooting

Common errors and fixes

Jank on scroll

Check you're animating transforms, not layout props (width/top). Use will-change sparingly.

Verify: Chrome DevTools → Performance → layout shift count

Animation ignored on reduced motion

Wrap with useReducedMotion and short-circuit the animation variants.

Verify: System → Motion preferences → reduce motion; reload

Large bundle after adding motion

Import only what you need from 'motion/react'; avoid re-exporting everything.

Verify: Bundle analyzer on the chunks

Alternatives

Motion.dev Animations Skill vs others

Alternative	When to use it instead	Tradeoff
magic-ui-mcp	You want pre-built animated components, not custom motion	Less custom, faster to adopt
cc-frontend-skill	You want general frontend guidance, not Motion.dev specifically	Not animation-focused
excalidraw-skill	You want diagrams, not web animations	Different problem

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills