[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92380":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},92380,"motion-anything","nexu-io\u002Fmotion-anything","nexu-io","✨ The agentic motion layer — an open-source, chat-native motion engine. Describe the feeling; your AI ships the animation.",null,"JavaScript",402,35,77,3,0,325,54.67,"Apache License 2.0",false,"main",[22,23,24,25,26,27,28,29],"ai-agent","animation","claude","design-tools","figma-motion-alternative","motion-design","motion-graphics","webgl","2026-07-22 04:02:06","# motion-anything\n\n\u003Cp align=\"center\">\u003Csub>A project in the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\">\u003Cb>nexu.io · Open Design\u003C\u002Fb>\u003C\u002Fa> family — the same team's take on motion. If motion-anything clicks for you, \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\">Open Design\u003C\u002Fa> is where the full agent-era design studio lives.\u003C\u002Fsub>\u003C\u002Fp>\n\n> **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.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Fhero.jpg\" alt=\"motion-anything — Anything becomes motion, on your laptop. Editorial dark banner with light-mode app windows: the component-motion workbench and the launch-video compositor, plus a stats row — 403 motion recipes, 230 portable skills, 2,680 icons, 59 design systems.\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"LICENSE\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#engines\">\u003Cimg alt=\"Engines\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fengines-8%20CLIs%20%2B%20BYOK-111?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#the-library\">\u003Cimg alt=\"Recipes\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fmotion%20recipes-403-8b7cf6?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#export-anything\">\u003Cimg alt=\"Export\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fexport-JSON%20%C2%B7%20CSS%20%C2%B7%20React%20%C2%B7%20Lottie%20%C2%B7%20MP4%20%C2%B7%20GIF-9b59b6?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#quickstart\">\u003Cimg alt=\"Quickstart\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fquickstart-1%20command-green?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#architecture\">\u003Cimg alt=\"Zero deps\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnpm%20dependencies-0-ff6b35?style=flat-square\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#the-library\">\u003Cimg alt=\"Design systems\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdesign%20systems-59-1abc9c?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#the-library\">\u003Cimg alt=\"Video templates\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHyperFrames%20video%20templates-58-e67e22?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#the-library\">\u003Cimg alt=\"HTML templates\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHTML%20prototype%20templates-112-3498db?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#the-library\">\u003Cimg alt=\"Icons\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ficons-2680-f39c12?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#open-design-ecosystem\">\u003Cimg alt=\"Portable skills\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fportable%20skills-230-8b7cf6?style=flat-square\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\">\u003Cimg alt=\"Family\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ffamily-nexu--io%2Fopen--design-ff7043?style=flat-square&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fx.com\u002FOpenDesignHQ\">\u003Cimg alt=\"Follow on X\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ffollow-%40OpenDesignHQ-000000?style=flat-square&logo=x&logoColor=white\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Cb>English\u003C\u002Fb> · \u003Ca href=\"README.zh-CN.md\">简体中文\u003C\u002Fa>\u003C\u002Fp>\n\n---\n\n## Showcase\n\nEvery 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 `\u003Cscript>` tags on any page (no React, no three.js, no build step). All tiles are animated GIFs recorded from the actual previews.\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fslides\u002Ffx-typewriter-multi\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Ftypewriter-multi.gif\" alt=\"Typewriter multi — terminal-style lines typing in sequence\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fshiny-text\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fshiny-text.gif\" alt=\"Shiny text — a highlight band sweeps across the label\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fslides\u002Ffx-typewriter-multi\u002F\">typewriter-multi\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>Terminal-style multi-line typing with live cursors — agent-boot energy.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fshiny-text\u002F\">shiny-text\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>A sheen sweeps across text-clipped gradient type. One class to use.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fstar-border\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fstar-border.gif\" alt=\"Star border — a slow light circles the button border\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Frotating-text\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Frotating-text.gif\" alt=\"Rotating text — words cycle in place\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fstar-border\u002F\">star-border\u003C\u002Fa>\u003C\u002Fb> · ambient CTA\u003Cbr\u002F>\u003Csub>A slow light orbits the border of your call-to-action. Pure CSS.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Frotating-text\u002F\">rotating-text\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>One line, many claims — words cycle in place with a soft travel.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fmagnet-lines\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fmagnet-lines.gif\" alt=\"Magnet lines — a grid of lines tracks the pointer\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Felastic-slider\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Felastic-slider.gif\" alt=\"Elastic slider — a springy gradient fill follows the drag\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fmagnet-lines\u002F\">magnet-lines\u003C\u002Fa>\u003C\u002Fb> · interactive\u003Cbr\u002F>\u003Csub>A field of compass needles that swivel toward your pointer.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Felastic-slider\u002F\">elastic-slider\u003C\u002Fa>\u003C\u002Fb> · feedback\u003Cbr\u002F>\u003Csub>A slider whose fill overshoots with a spring — tactile, GPU-safe.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fbounce-cards\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fbounce-cards.gif\" alt=\"Bounce cards — a stack fans out with a bounce\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fstrands\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fstrands.gif\" alt=\"Strands — flowing luminous fibers\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fbounce-cards\u002F\">bounce-cards\u003C\u002Fa>\u003C\u002Fb> · entrance\u003Cbr\u002F>\u003Csub>A card stack fans out with a staggered bounce as it enters the view.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fstrands\u002F\">strands\u003C\u002Fa>\u003C\u002Fb> · GPU shader\u003Cbr\u002F>\u003Csub>Luminous fibers drifting like hair in water — a quiet hero backdrop.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fsilk\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fsilk.gif\" alt=\"Silk — flowing silky fabric waves\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fwaves\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fwaves.gif\" alt=\"Waves — perlin-warped line field with a pointer wake\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fsilk\u002F\">silk\u003C\u002Fa>\u003C\u002Fb> · GPU shader\u003Cbr\u002F>\u003Csub>Flowing fabric, ported from a three.js scene to a single fragment shader.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fwaves\u002F\">waves\u003C\u002Fa>\u003C\u002Fb> · canvas 2D\u003Cbr\u002F>\u003Csub>A perlin-warped line field with a pointer wake — organic, editorial, calm.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Ffaulty-terminal\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Ffaulty-terminal.gif\" alt=\"Faulty terminal — CRT glitch grid\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fpixel-blast\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fpixel-blast.gif\" alt=\"Pixel blast — drifting pixel pattern with click ripples\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Ffaulty-terminal\u002F\">faulty-terminal\u003C\u002Fa>\u003C\u002Fb> · GPU shader\u003Cbr\u002F>\u003Csub>A glitching CRT grid for cyber \u002F dev-tool moods.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fpixel-blast\u002F\">pixel-blast\u003C\u002Fa>\u003C\u002Fb> · GPU shader · interactive\u003Cbr\u002F>\u003Csub>A drifting pixel pattern that ripples outward from every click.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Kinetic text\n\nMotion is not only backgrounds — text is a first-class citizen. These run on plain DOM, dependency-free:\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fdecrypted-text\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fdecrypted-text.gif\" alt=\"Decrypted text — glyphs resolve into ACCESS GRANTED\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Ftext-scramble\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Ftext-scramble.gif\" alt=\"Text scramble — a techy decode reveal between phrases\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fdecrypted-text\u002F\">decrypted-text\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>Random glyphs resolve left-to-right into the real line — hacker-movie energy, one attribute to use.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Ftext-scramble\u002F\">text-scramble\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>Decode-reveal between any phrases, programmable via \u003Ccode>scrambleTo(el, text)\u003C\u002Fcode>.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Fcount-up\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Fcount-up.gif\" alt=\"Count up — stats rolling from zero to their values\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Ca href=\"recipes\u002Fweb\u002Ftrue-focus\u002F\">\u003Cimg src=\"docs\u002Fassets\u002Feffects\u002Ftrue-focus.gif\" alt=\"True focus — a focus frame hops word to word, blurring the rest\" \u002F>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Fcount-up\u002F\">count-up\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>Numbers roll up to their value on view — the stat-block moment, eased properly.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd>\u003Cb>\u003Ca href=\"recipes\u002Fweb\u002Ftrue-focus\u002F\">true-focus\u003C\u002Fa>\u003C\u002Fb> · kinetic text\u003Cbr\u002F>\u003Csub>A focus frame hops word to word while the rest stays blurred — spotlight your claim.\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cp align=\"center\">\u003Csub>35 of the library's distinctive effects are faithful dependency-free ports — see \u003Ca href=\"ATTRIBUTION.md\">ATTRIBUTION.md\u003C\u002Fa> for sources and permissions. The full library holds \u003Cb>403 recipes\u003C\u002Fb>.\u003C\u002Fsub>\u003C\u002Fp>\n\n---\n\n## Product tour\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fhome.png\" alt=\"Home — describe the motion you want in one sentence\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Home\u003C\u002Fb> — one sentence in, animated artifact out. Pick a design system (59 brand packs) and a motion profile (Subtle → Cinematic), or just type.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fworkbench.png\" alt=\"Workbench — component-level motion editing on the running page, with the agent's plan, a keyframes inspector and the timeline\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Workbench\u003C\u002Fb> — the heart. The agent plans, generates and self-checks on the left; click any component on the \u003Ci>running\u003C\u002Fi> page and give it motion — triggers, presets or a 6-track keyframe editor with scrub + auto-keyframe. The timeline below warns when a view exceeds the restraint budget.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fvideo-editor.png\" alt=\"Video editor — layers, five scenes with transitions, film background and reference upload\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Video editor\u003C\u002Fb> — a canvas compositor for launch videos: text \u002F shape \u002F image \u002F video layers, five scenes with real transitions, a shared film background, kinetic typography, and in-browser WebCodecs MP4 export. No watermark, nothing uploaded.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fmotion-path.png\" alt=\"Motion path — draw a curve on the canvas and the selected text travels it\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Motion paths\u003C\u002Fb> — draw a line on the canvas, and the selected layer travels it: as drawn, or snapped to a clean line \u002F circle \u002F ellipse, with eased speed and per-character text motion on top.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fmotion-presets.png\" alt=\"Motion presets — entrance, emphasis, attention and exit presets stack onto any layer\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Motion presets\u003C\u002Fb> — entrance \u002F emphasis \u002F attention \u002F exit presets stack onto any layer (text, image, video, shapes), plus the full 200+ recipe library one click away.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Flibrary.png\" alt=\"Library — recipe cards with live animated previews\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Library\u003C\u002Fb> — 403 curated recipes with live card previews, searchable by intent. Every recipe carries \u003Ccode>avoid_when\u003C\u002Fcode> and a restraint budget: taste is enforced, not hoped for.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fengines.png\" alt=\"Engines — 8 coding-agent CLIs plus BYOK\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Engines\u003C\u002Fb> — bring the agent you already pay for. 8 CLIs auto-detected on your PATH, plus BYOK for direct Anthropic \u002F OpenAI \u002F Google API calls. Keys never leave your machine.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd valign=\"top\">\n\u003Cimg src=\"docs\u002Fassets\u002Fdark-mode.png\" alt=\"Dark mode\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Dark mode\u003C\u002Fb> — the whole app, both ways. Follows your OS in system mode.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n---\n\n## Why motion-anything\n\nMotion is one of the highest-leverage, lowest-understood parts of digital craft. Four problems keep great motion out of reach:\n\n1. **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.*\n2. **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 \u003Ccode>avoid_when\u003C\u002Fcode> and a restraint budget; the editor warns when a view exceeds it; \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> is always honored; GPU-safe properties only.*\n3. **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.*\n4. **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.*\n\n**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 \u002F CSS \u002F React \u002F Lottie or a portable skill any agent can use.\n\n---\n\n## Open Design ecosystem\n\nmotion-anything is not a standalone island — it is the **motion layer of the [Open Design](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design) family**, and the interop is real, not a logo wall:\n\n- **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\u002F` (or any agent that reads skills).\n- **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.\n- **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.\n- **Open Design Cloud is a first-class engine** — the same ACP runtime (`vela`) that powers OD drives motion-anything, with one recharge across GPT \u002F Claude \u002F Gemini \u002F DeepSeek.\n- **Shared craft assets** — agent engine icons, the icon library (2,680 icons · 38 categories), and the design language all come from the same family.\n\nThe 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.*\n\n---\n\n## Quickstart\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fmotion-anything.git\ncd motion-anything\nnode cli\u002Fbin\u002Fmotion.js serve 4399\n# open http:\u002F\u002Flocalhost:4399\n```\n\nThat 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).\n\n---\n\n## Engines\n\nYour prompt runs on **your** agent — the CLI session you already pay for, or your own API key. Nothing is proxied through anyone's server.\n\n| Engine | Vendor | Transport |\n|---|---|---|\n| Claude Code | Anthropic | headless `-p` + stream-json |\n| Codex CLI | OpenAI | `exec --json` event stream |\n| Cursor Agent | Cursor | stream-json |\n| OpenCode | OpenCode | `run --format json` event stream |\n| Grok Build | xAI | plain text via prompt file |\n| Hermes | xAI | ACP (JSON-RPC over stdio) |\n| Gemini CLI | Google | plain text |\n| Open Design Cloud | nexu.io | ACP via the `vela` CLI |\n| BYOK | Anthropic \u002F OpenAI \u002F Google | direct API with your key |\n\n---\n\n## The library\n\n- **403 motion recipes** — 77 real effects with live previews, plus curated reference cards. Categories: ambient backgrounds, feedback & delight, interaction, text, transitions.\n- **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`.\n- **59 design-system brand packs** + **58 video templates** + **112 HTML prototype templates** + **2,680 icons** — generation starts brand-grade, not blank.\n- **230 portable skills** — export any recipe as a `SKILL.md` and drop it into [Open Design](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design) or any agent that reads skills.\n\nThe taste contract lives in [`MOTION-SPEC.md`](MOTION-SPEC.md). The library golden path (how to add a recipe) lives in [`AGENTS.md`](AGENTS.md).\n\n---\n\n## Export anything\n\n| From | To |\n|---|---|\n| Any component's motion | JSON (portable) · CSS · React · Lottie |\n| Any animated page | MP4 (freezable-timeline frame capture) · GIF · single-file HTML |\n| Any launch video | MP4 via in-browser WebCodecs — no watermark, no upload, no fees |\n| Any recipe | a portable `SKILL.md` for your agent |\n\n---\n\n## Architecture\n\nPlain files, no build step, zero npm dependencies — the whole app is deliberately boring to run:\n\n- `app\u002Findex.html` — the entire client (workbench, editors, library, i18n ×4) in one file.\n- `cli\u002Fbin\u002Fmotion.js` — server + CLI in one file: static serving, project store, and the engine dispatch (stream-json \u002F JSONL events \u002F plain \u002F ACP \u002F BYOK behind one interface).\n- `app\u002Fvideo\u002F` — the canvas compositor: engine, WebCodecs MP4 export, HTML frame capture, vendored `mp4-muxer` + `gifenc` (MIT).\n- `recipes\u002F` — the library. `recipes\u002Fweb\u002F_fx\u002Fshaderbg.js` (58 lines) is the dependency-free WebGL runner behind all shader recipes.\n- `skills\u002F` — the router skill + bundled companion skills.\n\nAgents are first-class citizens of the codebase itself: [`AGENTS.md`](AGENTS.md) is a working agreement any coding agent can follow, and [`PROGRESS.md`](PROGRESS.md) keeps the state.\n\n---\n\n## Roadmap\n\n- **v0.1** — recipe library + router skill + workbench + video line + 8 engines + BYOK ← *we are here*\n- **v0.x** — richer video motion (recipe reuse inside video), deeper Figma import, streaming BYOK\n- **v1** — auto-add motion to existing Open Design artifacts; design-component → motion auto-assign\n\n---\n\n## License & credits\n\n[Apache-2.0](LICENSE). A project in the [nexu.io](https:\u002F\u002Fgithub.com\u002Fnexu-io) \u002F Open Design family.\nThird-party sources and permissions are recorded in [`ATTRIBUTION.md`](ATTRIBUTION.md).\n\n---\n\n📖 中文文档见 [README.zh-CN.md](README.zh-CN.md)\n","motion-anything 是一个开源、本地优先、聊天界面驱动的动画生成引擎，专为设计师与开发者提供自然语言到高质量动效的一站式工作流。它支持通过单句描述生成网页动画或宣传视频，具备组件级实时编辑能力（含4类触发机制、13个运动动词、弹簧缓动及完整关键帧编辑器），并集成8种代码代理引擎与403个预研运动配方，可导出为CSS、React、Lottie、MP4等多种格式。适用于UI\u002FUX动效设计、产品原型制作、营销视频快速生成等需要高效、可控、无依赖动效开发的场景。",2,"2026-07-08 04:30:13","CREATED_QUERY"]