Skip to content

motion-anything 0.1.0 — Anything becomes motion

Latest
Latest

Choose a tag to compare

View all tags
@XingliGe XingliGe released this 06 Jul 14:59
· 8 commits to main since this release
v0.1.0
763d52c

🌟 Codename: Anything becomes motion

🧭 v0.1.0 · first public release · Apache-2.0 · zero npm dependencies — motion-anything is the agentic motion layer: describe the feeling, your AI ships the animation.

Motion is where design handoffs go to die: a prototype gets rebuilt "roughly", an AI-generated page ships static, a video tool wants a subscription and stamps a watermark. 0.1.0 ships a different loop — talk to a coding agent, get a running animated page or a launch video, then keep editing motion component-by-component, on the artifact itself, on your own laptop. Design-tool motion features let you draw the motion; motion-anything makes it live in the page you ship. 🚀

📊 By the numbers
🎛️ Motion library 403 curated entries — incl. 35 faithful dependency-free GPU/canvas effect ports, each running from two <script> tags
🤖 Agent engines 8 CLIs + BYOK (Claude Code · Codex · Cursor · OpenCode · Grok Build · Hermes · Gemini · Open Design Cloud)
🎨 Design systems 59 DESIGN.md brand packs — generation is brand-grade out of the box
🧩 Portable skills 230 SKILL.md — every recipe is an Open-Design-compatible skill your agent can carry anywhere
🗂️ Templates & icons 58 HyperFrames video templates · 112 HTML prototype templates · 2,680 icons
📤 Export formats 7 — JSON · CSS · React · Lottie · MP4 · GIF · skill
🛠️ Backend one 1,728-line Node file, 0 npm dependencies — git clone, one command, no install step

🔥 Highlights

  • 💬 Chat is the motion editor. Click any component on the generated (or imported) page and tell it how to move — "入场慢一点，弹一下" works as well as "fade in from the left, springy". A local Chinese/English intent parser answers instantly offline; the agent takes over for anything richer. Chat-edit is component-edit, because every component's motion is a portable JSON artifact.

  • 🎞️ Motion lives on the running page, not in a handoff file. Every animation is saved back into plain HTML as data attributes + a tiny injected runtime — reopen the file anywhere and it just plays; reopen it in the workbench and it deserializes back into editable state. Four interactive triggers (load / scroll-into-view / hover / click) — the layer prototype-tool timelines can't reach.

  • 🧪 The agent checks its own work. Generation runs as a streaming loop you can watch: it plans, executes with visible tool activity, renders its own output, critiques it, and fixes what it doesn't like before showing you. No one-shot JSON black box.

  • 🎬 A real launch-video line, fully in the browser. Multi-scene canvas compositor: flowing transitions, per-word kinetic typography, per-layer keyframes, freehand motion paths that snap to circles/ellipses/lines, and a film-wide shared video background that plays continuously across scenes. Export MP4 via WebCodecs and animated GIF — no watermark, no ffmpeg, no cloud render, no per-render fees.

  • 🧭 Taste is a feature. Every recipe carries intent_keywords, avoid_when, and a restraint budget from MOTION-SPEC.md — and the timeline literally warns you when too many elements pile into the same entrance window. Curation over quantity; the tool that tells you to animate less.

  • 🤖 Bring the agent you already use. 8 engines across four protocol modes (Claude-style stream, JSONL event streams, plain text, ACP), auto-detected — whatever is installed lights up, switching is one click. Or skip CLIs entirely with BYOK keys for Anthropic / OpenAI / Google.

  • 🎨 Brand-grade from the first generation. 59 design-system packs + 112 HTML structure references + 6 motion profiles are injected into every prompt, so quality is engineered in at four gates: brand-grade input → agent self-review → spec-level restraint → component-level manual override. Generation is never the end of the road.

  • 📤 Motion as data, exported to anything. One JSON per component — the same artifact drives AI read/write, interop, and reuse. Export JSON · CSS · React · Lottie · MP4 · GIF, or package a recipe as a standalone skill and take it to your next project.

🎞️ The HTML motion line

  • 13 motion verbs across entrance / reaction families, grouped per trigger with compatibility rules.
  • Spring easing compiled to CSS linear() — real spring physics with zero JS at runtime.
  • A full keyframe editor: 6 property tracks (opacity / x / y / scale / rotate / blur), scrub-to-preview, and auto-keyframing — scrub to a moment, change a value, a keyframe appears. Tracks serialize into the saved HTML and survive save/reopen round-trips.
  • Reusable motion styles: save a component's motion, apply it to another component, the whole page, or every scene.
  • Import any existing HTML file straight into the workbench — pick a design system on the spot and start editing.

🎬 The video line

  • Scene-by-scene editing with per-scene duration, element timelines with draggable keyframe dots, and one-click entrance presets.
  • Device-ratio previews including vertical 720×1280 for social.
  • Comment & marquee tools: click an element or drag a box, and the conversation scopes itself to just that layer or region.

✨ Small delights

  • Everything respects prefers-reduced-motion — GPU shaders freeze to a single elegant frame.
  • Shader recipes degrade to a static fallback when WebGL isn't available.
  • The context chip shows the real file your conversation is editing; click it to jump to the code view.
  • The engine pill swaps its icon live as you switch providers; only installed CLIs are selectable.
  • Real dark mode with system following, four-language UI (EN / 简中 / 繁中 / 日本語), and a bilingual README.

📥 Run it:

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

Then open http://localhost:4399. You'll need at least one supported agent CLI installed (Claude Code, Codex, Cursor, OpenCode, Grok Build, Hermes, Gemini, or Vela) — or just a BYOK API key. First artifact in under three minutes.

See the README · a project in the nexu.io / Open Design family.

Assets 2
Loading