Does motion-anything auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is motion-anything free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

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.

FLOW.md

nexu-io@nexu-io

GitHub

Plugin Signal69/100Solid

maintained82

capable53

documented75

adopted60

Install

$ npx -y skills add nexu-io/motion-anything --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

JavaScript Node React Vue Svelte

+7 tags

HTML CSS Git GitHub Anthropic OpenAI Gemini

667

Stars

Forks

Maintained

Maintenance

JavaScript

Language

Apache-2.0

License

1mo ago

Last commit

1mo ago

Created

Repo: nexu-io/motion-anything

In this plugin

12 skills

See everything inside

What's inside

Skills

/gsap-coreOfficial GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic /gsap-frameworksOfficial GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for /gsap-performanceOfficial GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps./gsap-pluginsOfficial GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin,/gsap-reactOfficial GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library./gsap-scrolltriggerOfficial GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for

Show all 12 skills

/gsap-timelineOfficial GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that /gsap-utilsOfficial GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP./motion-anythingTurn one sentence of intent into tasteful, produced motion. Given a natural-language request like "make a good-looking animated landing page", "add a delightful like animation", or "make a silky release video", this skill classifies the intent, picks the most suitable recipes /web-clone网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。/web-shader-extractorExtract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use /web-to-design-mdExtract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured `design.md` an AI can consume. Use to seed motion-anything's design system from an existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").

README

Read on GitHub

motion-anything

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.

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 <script> 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:

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:

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.
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.
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.
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.

Engine	Vendor	Transport
Claude Code	Anthropic	headless `-p` + stream-json
Codex CLI	OpenAI	`exec --json` event stream
Cursor Agent	Cursor	stream-json
OpenCode	OpenCode	`run --format json` event stream
Grok Build	xAI	plain text via prompt file
Hermes	xAI	ACP (JSON-RPC over stdio)
Gemini CLI	Google	plain text
Open Design Cloud	nexu.io	ACP via the `vela` CLI
BYOK	Anthropic / OpenAI / Google	direct API with your key

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

From	To
Any component's motion	JSON (portable) · CSS · React · Lottie
Any animated page	MP4 (freezable-timeline frame capture) · GIF · single-file HTML
Any launch video	MP4 via in-browser WebCodecs — no watermark, no upload, no fees
Any recipe	a portable `SKILL.md` for your agent

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

File tree

1405

nexu-io/motion-anythingView on GitHub

.claude/
  launch.json
.gitignore
AGENTS.md
app/
  agent-icons/
    amr.svg
    claude.svg
    codex.svg
    cursor-agent.svg
    gemini.svg
    grok-build.svg
    hermes.svg
    opencode.svg
  brand/
    logo.svg
  data/
    design-systems.js
    html-templates.json
    recipes.js
    reicon-icons.json
    reicon-LICENSE.txt
    video-templates.json
  design-systems/
    airbnb/
      DESIGN.md
      manifest.json
    apple/
      DESIGN.md
      manifest.json
    arc/
      DESIGN.md
      manifest.json
    brutalism/
      DESIGN.md
      manifest.json
    canva/
      DESIGN.md
      manifest.json
    claude/
      DESIGN.md
      manifest.json
    claymorphism/
      DESIGN.md
      manifest.json
    cohere/
      DESIGN.md
      manifest.json
    coinbase/
      DESIGN.md
      manifest.json
    discord/
      DESIGN.md
      manifest.json
    duolingo/
      DESIGN.md
      manifest.json
    editorial/
      DESIGN.md
      manifest.json
    elevenlabs/
      DESIGN.md
      manifest.json
    figma/
      DESIGN.md
      manifest.json
    framer/
      DESIGN.md
      manifest.json
    futuristic/
      DESIGN.md
      manifest.json
    github/
      DESIGN.md
      manifest.json
    glassmorphism/
      DESIGN.md
      manifest.json
    gradient/
      DESIGN.md
      manifest.json
    huggingface/
      DESIGN.md
      manifest.json
    intercom/
      DESIGN.md
      manifest.json
    linear-app/
      DESIGN.md
      manifest.json
    loom/
      DESIGN.md
      manifest.json
    mastercard/
      DESIGN.md
      manifest.json
    meta/
      DESIGN.md
      manifest.json
    minimal/
      DESIGN.md
      manifest.json
    mintlify/
      DESIGN.md
      manifest.json
    miro/
      DESIGN.md
      manifest.json
    mistral-ai/
      DESIGN.md
      manifest.json
    mongodb/
      DESIGN.md
      manifest.json
    neon/
      DESIGN.md
      manifest.json
    neumorphism/
      DESIGN.md
      manifest.json
    nike/
      DESIGN.md
      manifest.json
    notion/
      DESIGN.md
      manifest.json
    nvidia/
      DESIGN.md
      manifest.json
    openai/
      DESIGN.md
      manifest.json
    perplexity/
      DESIGN.md
      manifest.json
    pinterest/
      DESIGN.md
      manifest.json
    posthog/
      DESIGN.md
      manifest.json
    raycast/
      DESIGN.md
      manifest.json
    replicate/
      DESIGN.md
      manifest.json
    resend/
      DESIGN.md
      manifest.json
    retro/
      DESIGN.md
      manifest.json
    revolut/
      DESIGN.md
      manifest.json
    runwayml/
      DESIGN.md
      manifest.json
    sentry/
      DESIGN.md
      manifest.json
    shopify/
      DESIGN.md
      manifest.json
    slack/
      DESIGN.md
      manifest.json
    SOURCE.md
    spacex/
      DESIGN.md
      manifest.json
    spotify/
      DESIGN.md
      manifest.json
    starbucks/
      DESIGN.md
      manifest.json
    stripe/
      DESIGN.md
      manifest.json
    supabase/
      DESIGN.md
      manifest.json
    tesla/
      DESIGN.md
      manifest.json
    uber/
      DESIGN.md
      manifest.json
    vercel/
      DESIGN.md
      manifest.json
    webflow/
      DESIGN.md
      manifest.json
    wise/
      DESIGN.md
      manifest.json
  index.html
  projects/
    landing-demo/
      index.html
  user-skills/
    _state.json
  video/
    engine.js
    export.js
    html-capture.js
    index.html
    vendor/
      gifenc.js
      mp4-muxer.js
ATTRIBUTION.md
CLAUDE.md
cli/
  bin/
    motion.js
  package.json
docs/
  assets/
    dark-mode.png
    effects/
      bounce-cards.gif
      count-up.gif
      decrypted-text.gif
      elastic-slider.gif
      faulty-terminal.gif
      magnet-lines.gif
      pixel-blast.gif
      rotating-text.gif
      shiny-text.gif
      silk.gif
      star-border.gif
      strands.gif
      text-scramble.gif
      true-focus.gif
      typewriter-multi.gif
      waves.gif
    engines.png
    hero.jpg
    home.png
    library.png
    motion-path.png
    motion-presets.png
    video-editor.png
    workbench.png
gallery/
  index.html
HTML-TO-VIDEO.md
INTEGRATIONS.md
LICENSE
MOTION-SPEC.md
PROGRESS.md
README.md
README.zh-CN.md
recipes/
  animxyz/
    _runtime/
      animxyz.css
    xyz-fade-big/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-down/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-left/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-right/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-small/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-up/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-flip-left/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-flip-up/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-rise-big/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-rotate/
      preview.html
      recipe.motion.yaml
      SKILL.md
  app/
    bottom-sheet/
      bottom-sheet.css
      bottom-sheet.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    button-press/
      button-press.css
      button-press.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    checkbox-pop/
      checkbox-pop.css
      checkbox-pop.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    ripple/
      preview.html
      recipe.motion.yaml
      ripple.css
      ripple.js
      SKILL.md
    tab-bar-slide/
      preview.html
      recipe.motion.yaml
      SKILL.md
      tab-bar-slide.css
      tab-bar-slide.js
    toast-pop/
      preview.html
      recipe.motion.yaml
      SKILL.md
      toast-pop.css
      toast-pop.js
  css/
    anim-backindown/
      backInDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinleft/
      backInLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinright/
      backInRight.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinup/
      backInUp.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutdown/
      backOutDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutleft/
      backOutLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutright/
      backOutRight.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutup/
      backOutUp.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounce/
      bounce.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bouncein/
      bounceIn.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceindown/
      bounceInDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceinleft/
      bounceInLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceinright/
      bounceInRight.css
... 1463 more

More Flows by @nexu-io.

VerifiedPlugin

Content

html-anything

From the team behind Open Design — 40k★ · 200+ contributors, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, Open Design is where the same team ships at scale.

81 skills

@nexu-io

View Plugin

VerifiedPlugin

Content

codex-slides

🎨 Open-source AI slide studio inside Codex: image-native decks, every slide a full visual canvas. ⚡ 10+ high-quality slides in ~4–5 minutes — Fast mode renders every page in parallel. 🔍 Watch the whole chain live: research → outline → style → render → edit → present → export PDF/PPTX. 🖥️ Browser-first · zero API keys · durable projects.

7 skills

@nexu-io

View Plugin

VerifiedPlugin

Content

open-design

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

163 skills

@nexu-io

View Plugin

FAQ

motion-anything is a Claude Code plugin with 12 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes gsap-core, gsap-frameworks, gsap-performance. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is 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.
How do I install motion-anything?: Run these in Claude Code: npx -y skills add nexu-io/motion-anything --agent claude-code. Then prompt normally.
Does motion-anything auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is motion-anything free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

motion-anything

FLOW.md

nexu-io@nexu-io

GitHub

Plugin Signal69/100Solid

maintained82

capable53

documented75

adopted60

Install

$ npx -y skills add nexu-io/motion-anything --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

JavaScript Node React Vue Svelte

+7 tags

HTML CSS Git GitHub Anthropic OpenAI Gemini

667

Stars

Forks

Maintained

Maintenance

JavaScript

Language

Apache-2.0

License

1mo ago

Last commit

1mo ago

Created

Repo: nexu-io/motion-anything

In this plugin

12 skills

See everything inside

What's inside

Skills

Show all 12 skills

README

Read on GitHub

motion-anything

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.

Showcase

Kinetic text

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

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:

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.
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.
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.
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.

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

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.

Engine	Vendor	Transport
Claude Code	Anthropic	headless `-p` + stream-json
Codex CLI	OpenAI	`exec --json` event stream
Cursor Agent	Cursor	stream-json
OpenCode	OpenCode	`run --format json` event stream
Grok Build	xAI	plain text via prompt file
Hermes	xAI	ACP (JSON-RPC over stdio)
Gemini CLI	Google	plain text
Open Design Cloud	nexu.io	ACP via the `vela` CLI
BYOK	Anthropic / OpenAI / Google	direct API with your key

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

From	To
Any component's motion	JSON (portable) · CSS · React · Lottie
Any animated page	MP4 (freezable-timeline frame capture) · GIF · single-file HTML
Any launch video	MP4 via in-browser WebCodecs — no watermark, no upload, no fees
Any recipe	a portable `SKILL.md` for your agent

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

File tree

1405

nexu-io/motion-anythingView on GitHub

.claude/
  launch.json
.gitignore
AGENTS.md
app/
  agent-icons/
    amr.svg
    claude.svg
    codex.svg
    cursor-agent.svg
    gemini.svg
    grok-build.svg
    hermes.svg
    opencode.svg
  brand/
    logo.svg
  data/
    design-systems.js
    html-templates.json
    recipes.js
    reicon-icons.json
    reicon-LICENSE.txt
    video-templates.json
  design-systems/
    airbnb/
      DESIGN.md
      manifest.json
    apple/
      DESIGN.md
      manifest.json
    arc/
      DESIGN.md
      manifest.json
    brutalism/
      DESIGN.md
      manifest.json
    canva/
      DESIGN.md
      manifest.json
    claude/
      DESIGN.md
      manifest.json
    claymorphism/
      DESIGN.md
      manifest.json
    cohere/
      DESIGN.md
      manifest.json
    coinbase/
      DESIGN.md
      manifest.json
    discord/
      DESIGN.md
      manifest.json
    duolingo/
      DESIGN.md
      manifest.json
    editorial/
      DESIGN.md
      manifest.json
    elevenlabs/
      DESIGN.md
      manifest.json
    figma/
      DESIGN.md
      manifest.json
    framer/
      DESIGN.md
      manifest.json
    futuristic/
      DESIGN.md
      manifest.json
    github/
      DESIGN.md
      manifest.json
    glassmorphism/
      DESIGN.md
      manifest.json
    gradient/
      DESIGN.md
      manifest.json
    huggingface/
      DESIGN.md
      manifest.json
    intercom/
      DESIGN.md
      manifest.json
    linear-app/
      DESIGN.md
      manifest.json
    loom/
      DESIGN.md
      manifest.json
    mastercard/
      DESIGN.md
      manifest.json
    meta/
      DESIGN.md
      manifest.json
    minimal/
      DESIGN.md
      manifest.json
    mintlify/
      DESIGN.md
      manifest.json
    miro/
      DESIGN.md
      manifest.json
    mistral-ai/
      DESIGN.md
      manifest.json
    mongodb/
      DESIGN.md
      manifest.json
    neon/
      DESIGN.md
      manifest.json
    neumorphism/
      DESIGN.md
      manifest.json
    nike/
      DESIGN.md
      manifest.json
    notion/
      DESIGN.md
      manifest.json
    nvidia/
      DESIGN.md
      manifest.json
    openai/
      DESIGN.md
      manifest.json
    perplexity/
      DESIGN.md
      manifest.json
    pinterest/
      DESIGN.md
      manifest.json
    posthog/
      DESIGN.md
      manifest.json
    raycast/
      DESIGN.md
      manifest.json
    replicate/
      DESIGN.md
      manifest.json
    resend/
      DESIGN.md
      manifest.json
    retro/
      DESIGN.md
      manifest.json
    revolut/
      DESIGN.md
      manifest.json
    runwayml/
      DESIGN.md
      manifest.json
    sentry/
      DESIGN.md
      manifest.json
    shopify/
      DESIGN.md
      manifest.json
    slack/
      DESIGN.md
      manifest.json
    SOURCE.md
    spacex/
      DESIGN.md
      manifest.json
    spotify/
      DESIGN.md
      manifest.json
    starbucks/
      DESIGN.md
      manifest.json
    stripe/
      DESIGN.md
      manifest.json
    supabase/
      DESIGN.md
      manifest.json
    tesla/
      DESIGN.md
      manifest.json
    uber/
      DESIGN.md
      manifest.json
    vercel/
      DESIGN.md
      manifest.json
    webflow/
      DESIGN.md
      manifest.json
    wise/
      DESIGN.md
      manifest.json
  index.html
  projects/
    landing-demo/
      index.html
  user-skills/
    _state.json
  video/
    engine.js
    export.js
    html-capture.js
    index.html
    vendor/
      gifenc.js
      mp4-muxer.js
ATTRIBUTION.md
CLAUDE.md
cli/
  bin/
    motion.js
  package.json
docs/
  assets/
    dark-mode.png
    effects/
      bounce-cards.gif
      count-up.gif
      decrypted-text.gif
      elastic-slider.gif
      faulty-terminal.gif
      magnet-lines.gif
      pixel-blast.gif
      rotating-text.gif
      shiny-text.gif
      silk.gif
      star-border.gif
      strands.gif
      text-scramble.gif
      true-focus.gif
      typewriter-multi.gif
      waves.gif
    engines.png
    hero.jpg
    home.png
    library.png
    motion-path.png
    motion-presets.png
    video-editor.png
    workbench.png
gallery/
  index.html
HTML-TO-VIDEO.md
INTEGRATIONS.md
LICENSE
MOTION-SPEC.md
PROGRESS.md
README.md
README.zh-CN.md
recipes/
  animxyz/
    _runtime/
      animxyz.css
    xyz-fade-big/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-down/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-left/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-right/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-small/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-fade-up/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-flip-left/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-flip-up/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-rise-big/
      preview.html
      recipe.motion.yaml
      SKILL.md
    xyz-rotate/
      preview.html
      recipe.motion.yaml
      SKILL.md
  app/
    bottom-sheet/
      bottom-sheet.css
      bottom-sheet.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    button-press/
      button-press.css
      button-press.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    checkbox-pop/
      checkbox-pop.css
      checkbox-pop.js
      preview.html
      recipe.motion.yaml
      SKILL.md
    ripple/
      preview.html
      recipe.motion.yaml
      ripple.css
      ripple.js
      SKILL.md
    tab-bar-slide/
      preview.html
      recipe.motion.yaml
      SKILL.md
      tab-bar-slide.css
      tab-bar-slide.js
    toast-pop/
      preview.html
      recipe.motion.yaml
      SKILL.md
      toast-pop.css
      toast-pop.js
  css/
    anim-backindown/
      backInDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinleft/
      backInLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinright/
      backInRight.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backinup/
      backInUp.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutdown/
      backOutDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutleft/
      backOutLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutright/
      backOutRight.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-backoutup/
      backOutUp.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounce/
      bounce.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bouncein/
      bounceIn.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceindown/
      bounceInDown.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceinleft/
      bounceInLeft.css
      preview.html
      recipe.motion.yaml
      SKILL.md
    anim-bounceinright/
      bounceInRight.css
... 1463 more

More Flows by @nexu-io.

VerifiedPlugin

Content

html-anything

81 skills

@nexu-io

View Plugin

VerifiedPlugin

Content

codex-slides

7 skills

@nexu-io

View Plugin

VerifiedPlugin

Content

open-design

163 skills

@nexu-io

View Plugin

FAQ

What is 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.
How do I install motion-anything?: Run these in Claude Code: npx -y skills add nexu-io/motion-anything --agent claude-code. Then prompt normally.
Does motion-anything auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is motion-anything free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.