motion-uilisted

Install the right animation library into a compatible project and build professional, animated UI/UX. Supports four engines: Framer Motion (the `motion` package, React declarative motion), GSAP (timelines + ScrollTrigger, any framework), anime.js v4 (lightweight, any framework), and Three.js (3D/WebGL, `@react-three/fiber` in React). Detects stack + package manager and picks a usable engine before installing — GSAP/anime.js/Three.js work in React, Next, Vite, Vue, Svelte, Astro, or vanilla; Framer Motion is React-only. Sources components in hybrid mode: 21st.dev Magic MCP when connected, otherwise built-in recipes. Two control modes: confirm-each-step (default) and --auto (opt-in end-to-end). Actions: animate, add motion, add framer motion, add gsap, add anime.js, add three.js, scroll animation, 3D scene, WebGL, make it professional, polish UI, design landing page, build animated components, motion-ui. Triggers: 'add animations', 'install framer motion', 'install gsap', 'use anime.js', 'add three.js / a 3D sc
IPedrax/motion-ui · ★ 1 · Web & Frontend · score 64

Install: claude install-skill IPedrax/motion-ui

# motion-ui — Animated, Professional UI with Framer Motion · GSAP · anime.js · Three.js Turns a plain JS project into a polished, animated interface. It (1) verifies the project can host the right animation engine, (2) installs it, and (3) builds professional components, sourcing from **21st.dev** (Magic MCP when available, built-in patterns otherwise). Four engines are supported so the skill fits any stack and any job — 2D UI motion, scroll storytelling, or 3D. The user stays in control by default; a single `--auto` flag hands the whole job to the AI. ## The four engines | Engine | Package(s) | Stack | Best for | | --- | --- | --- | --- | | **Framer Motion** | `motion` | **React only** | Declarative component motion — layout, gestures, mount/unmount. | | **GSAP** | `gsap` (+ `@gsap/react`) | Any JS project | Timelines, scroll-scrubbing/pinning (ScrollTrigger), SVG, "pro" sequencing. | | **anime.js** | `animejs` (v4) | Any JS project | Lightweight property/SVG animation, stagger, small bundle. | | **Three.js** | `three` (+ `@react-three/fiber`, `@react-three/drei`) | Any JS project | 3D / WebGL scenes, particles, shaders, product viewers. | They compose (GSAP driving a Three.js camera; Framer Motion wrapping an r3f `<Canvas>`). Full recipes: `references/motion-patterns.md` (Framer Motion) and `references/animation-libraries.md` (GSAP · anime.js · Three.js). ## When to use Use when the user wants to add motion/animation, "make it look professional," build a polished land