IPedrax

Motion UI — Design skill for Claude Code

Design community

Claude Code skill: install Framer Motion into a compatible project and build professional, animated UI from 21st.dev.

How to install Motion UI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open IPedrax/motion-ui and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Motion UI does

Claude Code skill: install Framer Motion into a compatible project and build professional, animated UI from 21st.dev. User-controlled by default, opt-in --auto mode.

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Pipelines — Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework 2.4k ★

README

motion-ui

Drop the right animation engine — Framer Motion, GSAP, anime.js, or Three.js — into your project and build professional, animated UI from 21st.dev, with you in control or fully on autopilot.

Plus Lenis for smooth scroll, morphicons for icon transitions, and a craft reference so the timing looks designed.

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 your stack, **picks an engine that actually fits it**, 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 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).

What it does

Four engines, matched to your stack — Framer Motion (React declarative motion), GSAP (timelines + ScrollTrigger), anime.js v4 (lightweight), and Three.js (3D/WebGL). GSAP, anime.js, and Three.js run in any JS project — React, Next.js, Vite, Vue, Svelte, Astro, or vanilla; Framer Motion is React-only.
Plus two add-ons that aren't engines — Lenis for inertial smooth scroll (a layer that sits under your engine, not a replacement for one) and morphicons for icon-to-icon transitions in ~7 KB. The skill knows when each is the wrong tool, which matters more.
Compatibility gate first — detects your stack, package manager, TypeScript, Tailwind, and any existing install before touching anything, then reports which engines are usable. No more blanket "React or bust" — a Vue or vanilla project still gets GSAP, an