Motion.dev Animations Skill

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

Author repository · Claude Skills documentation

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.

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