Web-animation & motion-design intelligence for AI coding agents.
Pick the right tool, then ship the motion with restraint, 60fps, and accessibility baked in — or point it at your code and let it review the animations you already have.
| 5 | 10 | 18 | 13 | 6 | 1 |
|---|---|---|---|---|---|
| tools, one decision gate | named motion patterns | anti-patterns catalog | easing & spring presets | framework idioms | zero-dep scanner |
Two modes — Build and Review — over one focused, opinionated knowledge base. No filler, no 200-line config. Just the decisions that make motion feel premium instead of cheap.
Two ways. Both are one step.
As a Claude Code plugin (native marketplace):
/plugin marketplace add propiter/motion-craft
/plugin install motion-craft@motion-craftAs a portable skill (Claude Code, Codex, Cursor — anything that reads SKILL.md):
npx skills add propiter/motion-craftManual? Copy
skills/motion-craft/into your~/.claude/skills/. It's plain Markdown plus one optional, read-only Node script — nothing installs, nothing phones home.
Most "animation help" hands you a snippet and leaves. Motion Craft makes the two decisions that actually determine whether motion feels crafted or cheap:
| Mode | You say… | You get… |
|---|---|---|
| 🛠️ Build | "animate this drawer", "make the hero feel premium" | The right tool + paste-ready code, correct easing & duration, and a prefers-reduced-motion fallback |
| 🔍 Review | "why does this feel janky?", "audit my animations" | A Smell · Fix · Why table — every issue named, with the exact replacement |
Climb only when the rung below genuinely can't express it. CSS → View Transitions → Motion → GSAP (Lottie sideways, for After Effects exports).
hover/press/state ─────────────▶ CSS transition
enter on mount, no JS ─────────▶ @starting-style
React state / gestures ────────▶ Motion (motion/react)
element/page morph ────────────▶ View Transitions API
timeline / scroll-scrub / pin ─▶ GSAP + ScrollTrigger
AE vector export ──────────────▶ Lottie
The Review checklist ships as a dependency-free scanner you can run in CI:
node skills/motion-craft/scripts/audit-motion.mjs [path] motion-craft · review
src/components/Drawer.css
:12 transition: all
→ Name the properties: `transition: transform 200ms var(--ease-out-expo)`
Animates props you never meant to and forces extra style/layout work.
:40 File animates but never handles prefers-reduced-motion
→ Add a `@media (prefers-reduced-motion: reduce)` block.
Exits non-zero when it finds something. Read-only — it never edits your files.
skills/motion-craft/
├── SKILL.md the brain — two modes, the gate, the craft rules
├── references/
│ ├── recipes.md paste-ready code: CSS · Motion · GSAP · View Transitions · Lottie
│ ├── easing-library.md named cubic-bezier tokens + spring presets, by situation
│ ├── patterns.md 10 named motion patterns with code
│ ├── anti-patterns.md the 18-entry slop catalog the scanner is built from
│ └── frameworks.md React · Vue · Svelte · Astro · vanilla idioms
└── scripts/
└── audit-motion.mjs the Review mode, automated (zero deps, read-only)
Animate only
transformandopacityfor anything that moves, keep interactive UI under ~300ms, and always honorprefers-reduced-motion. Everything else is detail.
Built on the portable Agent Skills (SKILL.md) standard and packaged as a Claude Code
plugin. Works with Claude Code, Codex, Cursor, and anything that loads skills.
Issues and PRs welcome — new patterns, sharper rules, more framework idioms. Keep it tool-agnostic and keep the accessibility floor non-negotiable.
This skill distills widely-shared web-animation engineering practice into an agent-ready form. For deeper study of the craft:
Apache 2.0 © propiter. Built to be used, shared, and improved — because sharing is the best part.