motion-anything

A project in the nexu.io · Open Design family — the same team’s take on motion. If motion-anything clicks for you, Open Design is where the full agent-era design studio lives.

Describe the feeling — your AI ships the animation. The agentic motion layer: a local-first, chat-native motion engine. Generate animated pages and launch videos from one sentence, then edit motion on the running page, component by component — 4 triggers, 13 motion verbs, spring easing, a full keyframe editor. Driven by 8 coding-agent engines + BYOK (Claude Code · Codex · Cursor · OpenCode · Grok Build · Hermes · Gemini · Open Design Cloud), armed with 403 curated motion recipes, wired into the Open Design ecosystem (59 DESIGN.md brand packs · 58 HyperFrames video templates · 112 HTML prototype templates · 2,680 icons), and exported to anything: JSON · CSS · React · Lottie · MP4 · GIF · portable skills. Zero npm dependencies. No watermark. No per-render fees.

English · 简体中文

---

Showcase

Every tile below is a live, dependency-free recipe from the library — real GPU shaders, canvas engines and kinetic text, faithfully ported so they run with two `` tags on any page (no React, no three.js, no build step). All tiles are animated GIFs recorded from the actual previews.

Kinetic text

Motion is not only backgrounds — text is a first-class citizen. These run on plain DOM, dependency-free:

35 of the library’s distinctive effects are faithful dependency-free ports — see ATTRIBUTION.md for sources and permissions. The full library holds 403 recipes.

---

Product tour

---

Why motion-anything

Motion is one of the highest-leverage, lowest-understood parts of digital craft. Four problems keep great motion out of reach:

1. AI-generated pages are dead ends — you can generate a landing page, but tweaking its motion means re-rolling the whole page or hand-writing CSS. There is a gap between generating and refining. motion-anything edits motion on the running page, per component, and writes it back to the file.
2. AI has no taste — default output is either everything-fades-in-at-once or a fireworks show. Here, taste is a feature: every recipe declares avoid_when and a restraint budget; the editor warns when a view exceeds it; prefers-reduced-motion is always honored; GPU-safe properties only.
3. The ecosystem is scattered — GSAP, Framer Motion, anime.js, Lottie… each a learning curve. You express intent (“a liquid-metal background”), the router picks from curated recipes. You never need to know a library name.
4. Tools lock you in — proprietary models, per-render fees, watermarks, handoff-only artifacts. This is Apache-2.0, local-first, engine-agnostic, and everything exports.

vs. Figma Motion — their artifact is a handoff; ours is the running page itself. Their timeline has no interaction triggers; hover and click are first-class here. Their motion lives in their app; ours exports to JSON / CSS / React / Lottie or a portable skill any agent can use.

---

Open Design ecosystem

motion-anything is not a standalone island — it is the motion layer of the Open Design family, and the interop is real, not a logo wall:

• Every recipe is an Open-Design-compatible SKILL.md — export any of the 230 portable skills and drop it straight into Open Design’s skills/ (or any agent that reads skills).
• 59 brand packs in Open Design’s DESIGN.md format — generation starts on-brand; the same contract your team already uses in OD drives motion here.
• 58 HyperFrames video templates + 112 OD HTML prototype templates shipped in the library — briefs get matched against them so output starts from proven structure, not a blank canvas.
• Open Design Cloud is a first-class engine — the same ACP runtime (vela) that powers OD drives motion-anything, with one recharge across GPT / Claude / Gemini / DeepSeek.
• Shared craft assets — agent engine icons, the icon library (2,680 icons · 38 categories), and the design language all come from the same family.

The loop: pick a beautiful design system (OD’s superpower) → generate a brand-grade page → give it motion, per component (our superpower) → export it back as a skill anyone’s agent can reuse.

---

Quickstart

git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything
node cli/bin/motion.js serve 4399
# open http://localhost:4399

That is the whole install. No npm install — the project has zero dependencies. You need Node 18+ and at least one agent engine: any supported CLI on your PATH (it will be auto-detected), or an API key for BYOK (Settings → Execution mode).

---

Engines

Your prompt runs on your agent — the CLI session you already pay for, or your own API key. Nothing is proxied through anyone’s server.

---

The library

• 403 motion recipes — 77 real effects with live previews, plus curated reference cards. Categories: ambient backgrounds, feedback & delight, interaction, text, transitions.
• Standardized manifests — every recipe is a folder with recipe.motion.yaml, a self-contained preview.html, the implementation, and a SKILL.md. Three fields you will not find elsewhere: intent_keywords, avoid_when, restraint.
• 59 design-system brand packs + 58 video templates + 112 HTML prototype templates + 2,680 icons — generation starts brand-grade, not blank.
• 230 portable skills — export any recipe as a SKILL.md and drop it into Open Design or any agent that reads skills.

The taste contract lives in MOTION-SPEC.md. The library golden path (how to add a recipe) lives in AGENTS.md.

---

Export anything

---

Architecture

Plain files, no build step, zero npm dependencies — the whole app is deliberately boring to run:

• app/index.html — the entire client (workbench, editors, library, i18n ×4) in one file.
• cli/bin/motion.js — server + CLI in one file: static serving, project store, and the engine dispatch (stream-json / JSONL events / plain / ACP / BYOK behind one interface).
• app/video/ — the canvas compositor: engine, WebCodecs MP4 export, HTML frame capture, vendored mp4-muxer + gifenc (MIT).
• recipes/ — the library. recipes/web/_fx/shaderbg.js (58 lines) is the dependency-free WebGL runner behind all shader recipes.
• skills/ — the router skill + bundled companion skills.

Agents are first-class citizens of the codebase itself: AGENTS.md is a working agreement any coding agent can follow, and PROGRESS.md keeps the state.

---

Roadmap

• v0.1 — recipe library + router skill + workbench + video line + 8 engines + BYOK ← we are here
• v0.x — richer video motion (recipe reuse inside video), deeper Figma import, streaming BYOK
• v1 — auto-add motion to existing Open Design artifacts; design-component → motion auto-assign

---

License & credits

Apache-2.0. A project in the nexu.io / Open Design family. Third-party sources and permissions are recorded in ATTRIBUTION.md.

---

📖 中文文档见 README.zh-CN.md