# How do I install Framer Motion and add animations with Claude Code?

> Claude Code can run commands in your project, so ask it directly: "install motion and add a fade-in to the hero section". It will run npm install motion and edit your components. For designed, multi-state animations, connect an animation tool through MCP so Claude Code can create and edit animation files instead of hand-writing every keyframe.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-add-animations-with-claude-code/

## Key takeaways

- Claude Code can run npm install motion for you
- Be specific: element, effect, duration, and reduced-motion behaviour
- Motion (formerly Framer Motion) imports from "motion/react"
- MCP servers let Claude Code edit animation files in design tools
- Always review motion on a real device; AI cannot feel timing

## Frequently asked questions

### Can Claude Code make Lottie animations?

It can write or edit Lottie JSON, but results for anything complex are unreliable. A design tool with an MCP server gives better control.

### Should I install framer-motion or motion?

Install motion. framer-motion is the old package name for the same library.

### Can Claude do motion design?

It can implement motion you describe and suggest values. Judging how it feels is still your job.

### Is ExodeUI made by Anthropic?

No. ExodeUI is an independent product with an MCP server that works with Claude Code and other tools.

## Related

- [Claude animation guide](https://www.exodeui.com/learn/claude-animation)
- [Claude Code MCP setup](https://www.exodeui.com/docs/claude-mcp)
- [Which design tools have an MCP server?](https://www.exodeui.com/questions/which-design-tools-have-an-mcp-server)
- [Best animation tools for AI coding agents](https://www.exodeui.com/best-animation-tools-for-ai-coding-agents)