Drop Framer Motion into your project and build professional, animated UI from 21st.dev — with you in control, or fully on autopilot.
Most "add some animation" requests end one of two ways: a half-installed dependency that breaks the build, or motion bolted on so heavily it feels cheap. motion-ui does it properly. It first checks whether your project can even host Framer Motion, installs it the right way for your package manager, then builds polished components sourced from 21st.dev — using the 21st.dev Magic MCP when it's connected, and built-in 21st-style recipes when it isn't. You stay in control by default; one flag hands the whole job to the AI.
Built for Claude Code (Windows / macOS / Linux).
- Compatibility gate first — detects your stack (React, Next.js, Vite, Remix, Astro), package manager, Tailwind, and any existing motion install before touching anything. Rejects unsupported stacks with the right alternative (Vue →
motion-v, Svelte → built-in transitions). - Clean install — adds the modern
motionpackage with the correct command for npm / pnpm / yarn / bun, and respects a legacyframer-motioninstall if you already have one. - Hybrid 21st.dev sourcing — uses the Magic MCP to fetch/generate real components when it's connected; falls back to built-in 21st-style Tailwind +
motion/reactrecipes when it isn't. Never blocks. - Two control modes — Confirm (default): proposes every step and waits for your yes. Auto (
--auto, opt-in): detect → install → design → apply end-to-end, no stops. - Quality baked in — every component honors
prefers-reduced-motion, animates only transform/opacity, stays accessible, and matches your existing design tokens.
Open PowerShell and run:
irm https://raw.githubusercontent.com/IPedrax/motion-ui/main/install.ps1 | iexThis installs the skill into %USERPROFILE%\.claude\skills\motion-ui. Restart Claude Code and you're ready.
mkdir -p ~/.claude/skills \
&& curl -L https://raw.githubusercontent.com/IPedrax/motion-ui/main/motion-ui.skill -o /tmp/motion-ui.zip \
&& unzip -o /tmp/motion-ui.zip -d ~/.claude/skills \
&& rm /tmp/motion-ui.zipPrefer to let Claude install it? Paste this into a new chat: "Install this Claude skill for me from https://github.com/IPedrax/motion-ui and walk me through anything you need."
motion-ui works without any extra setup (built-in recipes). To unlock live, generated components, connect the 21st.dev Magic MCP:
-
Get a free API key at 21st.dev/magic/console.
-
Add the server (user scope, all projects):
claude mcp add magic --scope user -- npx -y @21st-dev/magic@latest API_KEY=YOUR_KEY
-
Restart Claude Code. motion-ui detects it automatically and prefers it over the fallback.
The Magic MCP runs only while Claude Code is open — it is not a startup service.
Just ask, from inside a project:
- "add animations to this landing page"
- "install framer motion and make this look professional"
- "animate the hero and feature grid using 21st.dev"
Full control (default): it proposes the install and each component, and waits for your approval at every gate.
Full autopilot (opt-in): add --auto (or say "you decide everything") and it runs the whole job — detect, install, pick a direction, generate, and apply — without stopping.
add a polished animated pricing section --auto
Detect compatibility → Install Framer Motion → Source components (Magic MCP or fallback) → Apply & verify.
The compatibility gate is the point: Framer Motion is React-only, so motion-ui never installs into a project that can't use it, and tells you the right alternative when it can't. Sourcing is hybrid so the skill is useful whether or not you've connected Magic, and the autonomy is a single explicit flag so "full AI control" never happens by accident.
Full details: motion-ui/SKILL.md · animation cookbook: references/motion-patterns.md · sourcing & fallback components: references/21st-components.md.
MIT — animation patterns built on Framer Motion; components sourced from 21st.dev.