Skip to content
UXClaim
Design Ops

Motion.dev Animations

Generate 120fps GPU-accelerated web animations with spring physics, scroll effects, and gesture interactions using Motion.dev.

View source More in Design Ops

What it does

Motion.dev Animations is a Claude Code skill that generates production-grade web animations from natural language descriptions. Say “add a hero fade-up” or “create scroll parallax” and get TypeScript code ready to ship.

How it works

The skill follows a four-step workflow: clarify your framework (React, Next.js, Svelte, Astro), plan the animation strategy with optimal spring physics, generate GPU-accelerated code using only transform/opacity/filter properties, and verify performance meets 60fps+ targets.

It generates 120fps animations using Motion.dev patterns, respects prefers-reduced-motion for accessibility, and keeps bundle size under 50KB through progressive loading.

Animation types

Entrance animations: Hero fade-up, staggered sequences, scroll reveals
Scroll effects: Parallax layers, scroll progress bars
Gesture interactions: Card hover lifts, magnetic buttons, drag carousels
Micro-interactions: Button press feedback, toggle switches, loading spinners
Layout animations: Drag-to-reorder lists, accordions, tab transitions

Who benefits

Product designers and frontend developers who want polished animations without deep animation expertise. Works with React 19+, Next.js 15+, Svelte 5+, and Astro 4+.

Frequently asked questions

How do I install Motion.dev Animations for Claude Code?
Clone the repository into your Claude Code skills directory: `git clone 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, or scroll effects in prompts.
What's the difference between Motion.dev and Framer Motion?
Motion.dev is the successor to Framer Motion. It's built from scratch with better performance, smaller bundle size, improved TypeScript support, and native Svelte/Astro compatibility. This skill uses Motion.dev v11.
Does it support accessibility and reduced motion?
Yes. Every animation generated respects the `prefers-reduced-motion` CSS media query automatically. The skill includes full keyboard navigation support and focuses on semantic HTML to ensure accessible interactions.
Can I use this with vanilla JavaScript?
Yes. While optimized for React/Next.js/Svelte/Astro, the skill supports vanilla JavaScript via the `motion` package (ES2020+). For Vue 3, use the `motion-v` package.
What performance guarantees does the skill provide?
All generated animations target 60fps+ (120fps ideal), bundle size under 50KB, zero layout shifts, and full keyboard support. The skill uses only GPU-accelerated properties (transform, opacity, filter) to avoid jank.
How do I describe what animation I want?
Use natural language: "Create a hero section with fade-up entrance", "Add parallax scrolling to the landing page", "Build a card with hover lift effect", or "Implement drag-to-reorder for this list". Claude Code clarifies framework and design goals, then generates code.
Does the skill include spring physics presets?
Yes. The skill includes tested spring physics values and easing curves optimized for common animations (entrance, hover, drag). You can customize damping and stiffness, but presets handle 90% of use cases.
How much context does this skill consume?
The core instructions use ~2,000 tokens. Examples, API reference, and templates load on-demand only when needed, reducing context consumption by 87% compared to loading everything upfront.

Glossary

GPU-accelerated properties
CSS properties (transform, opacity, filter) that animate on the GPU without triggering layout recalculations. Essential for smooth 60fps+ animations.
Spring physics
Animation timing based on physics simulation rather than fixed curves. Creates natural, responsive motion with damping and stiffness values controlling bounce and speed.
Layout shift
Unexpected movement of page elements during loading or animation. Avoided by animating only transform/opacity/filter properties, not width/height/position.
prefers-reduced-motion
CSS media query detecting user accessibility preference for reduced animations. Animations should respect this to avoid causing motion sickness or distraction.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.