"How to install Framer Motion in Claude Code" started appearing in Google suggestions in 2026, a sign of how many people now build front ends with AI agents.
Install and use Motion
In Claude Code, describe the result you want. For example: "Install the motion package. In components/Hero.tsx, fade and slide up the heading on load, 300 ms, ease-out. Skip the animation when prefers-reduced-motion is set." Claude Code will run the install, import from motion/react and edit the file. Review the diff before accepting.
import { motion, useReducedMotion } from 'motion/react';
const reduce = useReducedMotion();
<motion.h1
initial={reduce ? false : { opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: 'easeOut' }}
/>Prompts that work better
Name the element and file. Give numbers (duration, distance, spring stiffness). Say what triggers it. Ask for reduced-motion handling. Ask it to keep animations on transform and opacity.
For designed, multi-state motion: MCP
Hand-written keyframes get messy for loaders with several states, onboarding flows or mascots. Tools with an MCP server let Claude Code create and edit animation files directly. ExodeUI has an MCP server, so Claude Code, Cursor and similar tools can build and change animations from plain-language prompts, and you can open the result in the visual editor. Rive offers a CLI and agent for its files. We make ExodeUI; it is not affiliated with Anthropic.