motion-anything：一句话描述「感觉」，本地AI直接出专业级动画——403约束配方 + 组件级实时编辑 + 视频一键导出 + 零依赖架构

📝

motion-anything：一句话描述「感觉」，本地AI直接出专业级动画——403约束配方 + 组件级实时编辑 + 视频一键导出 + 零依赖架构全解析（附高效用法与源码深度）

原文链接：https://mp.weixin.qq.com/s/e4h3gmB63WQLLK_RWB1_8g

motion-anything：一句话描述「感觉」，本地AI直接出专业级动画——403约束配方 + 组件级实时编辑 + 视频一键导出 + 零依赖架构全解析（附高效用法与源码深度）

这个项目值得深度研究

在 AI 内容生成时代，很容易用一句话或一个 prompt 产出一整页漂亮的落地页、演示文稿或 launch video，但动效部分却常常成为“死板”的短板：要么所有元素同时淡入，要么过度炫技缺乏节制；要么生成后无法精细调整，只能整体重来；要么依赖付费工具、云渲染或特定框架，存在水印、按次计费、隐私泄露风险。

motion-anything（GitHub: nexu-io/motion-anything，Apache-2.0，v0.1.0 刚发布）本地优先、聊天原生（chat-native）动效引擎**——“Describe the feeling — your AI ships the animation.” 是Agentic Motion Layer：用自然语言描述感觉，AI（自己的 8 大编码 Agent 之一或 BYOK）生成初始动画；然后在运行中的页面上逐组件点击编辑，支持触发器、运动动词、弹簧缓动和完整关键帧编辑；所有动效都受MOTION-SPEC.md “品味契约” 严格约束（避免_when + restraint 预算 + GPU 安全 + 无障碍）；最终可导出为 JSON/CSS/React/Lottie/MP4/GIF/便携技能（SKILL.md），零 npm 依赖、无水印、无按次费用。

项目属于 nexu-io / Open Design 家族，与 html-anything、open-design 等深度互操作。核心亮点：

●403 个精选 motion recipes（77 个真实可运行效果 + 参考卡片），每条都有 intent_keywords、avoid_when、restraint 元数据。

●8 大编码 Agent 引擎 + BYOK：Claude Code、Codex CLI、Cursor Agent、OpenCode、Grok Build、Hermes、Gemini CLI、Open Design Cloud（vela ACP），全部本地或用户自有 Key，不经过任何代理服务器。

●组件级实时编辑 + 完整工具链：Workbench（运行页点击编辑）、Video Editor（画布合成器 + WebCodecs MP4）、Motion Path（画曲线）、Motion Presets（可堆叠的入场/强调/注意/退出）、Library（意图搜索 + 实时预览卡片）。

●零依赖架构：整个应用是单个 app/index.html + 单个 cli/bin/motion.js，node cli/bin/motion.js serve 4399 即可运行，无需 npm install。

●品味内置：MOTION-SPEC.md 定义了第一性原理、时长/缓动 token、restraint 预算、性能规则、prefers-reduced-motion 优雅降级、分类 taxonomy 和意图映射。

●全栈导出与生态：单组件 motion → JSON/CSS/React/Lottie；整页 → MP4/GIF/单文件 HTML；任意 recipe → 便携 SKILL.md（可直接丢进 Open Design skills/ 目录）。

把“动效品味”做成可执行契约 + 可视化编辑器 + Agent 可复用的技能的系统级方案。

一、核心功能

1. Home：一句话生成带动效的页面/视频

输入自然语言（支持中英文意图关键词），选择设计系统（59 个 Open Design brand packs）或 motion profile（Subtle → Cinematic），Agent 规划 → 生成 → 自检，输出可直接运行的带动效页面。生成物不是死 HTML，而是可立即进入 Workbench 继续编辑的活页面。

2. Workbench：运行页上的组件级动效编辑（核心差异化）

这是项目最强卖点。与 Figma Motion 等“导出交接物”不同，这里直接在运行中的页面上点击任意组件，为其单独附加/编辑 motion。

●支持 4 种触发器（hover、click、scroll-reveal、load 等，具体由编辑器暴露）。

●13 种 motion verbs + 弹簧缓动（spring-soft / spring-snappy）。

●6-track 关键帧编辑器：带 scrub 播放头 + auto-keyframe，支持 transform/opacity 等 GPU 友好属性。

●Agent 计划面板 + 自检 checklist（左侧）。

●时间线底部实时显示 restraint budget 警告（超过 MOTION-SPEC 预算会提示）。

●编辑结果可写回文件或导出为 per-component motion 数据。

解决了“AI 生成后无法精细调整”的最大痛点：生成是起点，编辑是主战场，且所有编辑都在活页面上所见即所得。

3. Video Editor：Launch Video 画布合成器

独立于网页动效的视频产线：

●图层系统：text / shape / image / video 层。

●场景与转场：支持 5 个场景 + 真实转场。

●共享电影背景 + 动态排版（kinetic typography）。

●两种导出路径（HTML-TO-VIDEO.md 明确说明）：

a.英雄路径（零依赖）：Canvas compositor + WebCodecs + 内置 mp4-muxer（MIT）直接在浏览器内导出 MP4，无上传、无费用、无水印。

b.高保真路径（可选）：通过 npx hyperframes（需 Node ≥22 + FFmpeg + Chromium）走真实 Chrome 渲染，支持 WebGL/CSS 复杂 motion，frame-accurate。

●额外支持 Motion Path（在画布上画曲线，层沿路径运动，可吸附直线/圆/椭圆，带缓动和逐字符 kinetic text）。

4. Motion Library：403 个受约束的动效配方

每条 recipe 都是自包含文件夹（recipes/<surface>/<id>/）：

●recipe.motion.yaml（manifest，包含五维标签 + 灵魂三字段）。

●preview.html（纯浏览器可打开、无构建、无外部依赖的实时演示）。

●实现文件（CSS/JS/WebGL shader 等）。

●SKILL.md（Open Design 兼容的便携技能）。

灵魂字段（AGENTS.md 强调必须诚实填写，否则 recipe 不完整）：

●intent_keywords：人类描述这个效果的各种说法（含中文）。

●avoid_when：明确什么时候不要用（这是品味护城河）。

●restraint：max_per_view + notes（严格执行 MOTION-SPEC 预算）。

分类维度（五维建库，便于 Agent 组合查询）：

●canvas：web / slides / video / app

●target：text / button / card / list / image / icon / section / number / transition / background

●intent：entrance / scroll-reveal / hover-press / feedback-delight / emphasis / loading / text-kinetic / ambient 等（对齐 MOTION-SPEC）

●runtime：css / js / WebGL 等

●export：skill / motion-json / lottie / html / video

35 个真实 port 来自 react-bits（作者授权），shader 逻辑用 shaderbg.js（58 行左右的零依赖 WebGL runner）重新托管；其余为参考卡片。所有效果都严格遵守 GPU-safe（只 animate transform/opacity）、prefers-reduced-motion 优雅降级、60fps 目标。

5. 其他实用功能

●Motion Presets：entrance / emphasis / attention / exit 可堆叠到任意层 + 一键调用 200+ recipe 库。

●Dark mode + 系统跟随 + i18n（多语言支持）。

●Gallery：静态可能性画廊，读取 recipes 生成预览。

●便携技能导出：任意 recipe 导出为 SKILL.md，可直接用于 Open Design 或任何支持 skill 的 Agent，形成“生成 → 动效 → 复用”闭环。

二、安装方法

唯一官方方式：

●●●bash

`git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything
node cli/bin/motion.js serve 4399
# 浏览器打开 http://localhost:4399`

要求：

●Node.js ≥ 18

●至少一个支持的 Agent 引擎在 PATH（或在 Settings → Execution mode 配置 BYOK API Key）

●完全不需要 npm install —— 项目零 npm 依赖

从源码运行就是上面命令，无构建步骤、无 pnpm、无 Docker 必须（可选用于 hyperframes 高质量渲染）。

引擎配置：

●支持的 CLI 自动检测：Claude Code（headless -p + stream-json）、Codex（exec –json）、Cursor、OpenCode、Grok Build、Hermes（ACP JSON-RPC）、Gemini、Open Design Cloud（vela ACP）。

●BYOK：直接用你的 Anthropic/OpenAI/Google Key，Key 永不离开本机。

三、高效使用方法与最佳实践

推荐黄金 workflow：

1.Home 精准 prompt：用项目定义的意图关键词（”snappy responsive feedback”、”delightful celebration burst on like”、”elegant cinematic entrance” 等）。结合 best_for 描述具体场景。

2.选择约束 profile：Subtle（保守）到 Cinematic（英雄时刻），让 Agent 初始输出就在预算内。

3.Workbench 精细打磨（必做步骤）：

○在活页面上逐组件点击，不要一次性给整页加 motion。

○优先用 Library 里的成熟 recipe（它们已经过 avoid_when + restraint 校验），再叠加 presets 或手动关键帧。

○时刻关注底部 timeline 的 restraint 警告，超过预算立刻调整（项目把“品味”做成了可执行检查）。

4.视频产线：

○简单需求 → 直接用 Canvas + WebCodecs 零依赖导出。

○高质量/复杂 WebGL → 走 HyperFrames（npx hyperframes）。

5.导出与复用：

○单组件 motion → JSON（便携）或 CSS/React/Lottie。

○整页 → MP4/GIF/单文件 HTML。

○任意 recipe → SKILL.md → 丢进 Open Design skills/ 或你的 Agent 项目，实现跨项目复用。

6.性能与无障碍 edge case：

○所有 shader recipe 都用 shaderbg.js 实现，自动处理 prefers-reduced-motion（静态帧或停止动画）。

○只 animate transform/opacity，永远不会 layout thrash。

○中低端笔记本也能保持 60fps（项目明确要求）。

避坑建议：

●不要在 destructive/neutral action 上用 celebratory burst（avoid_when 已声明）。

●一个 viewport 内 celebratory moment ≤1，ambient loop 最多一个。

●大元素/长距离运动用更长时长（但仍在 token 带内）。

●永远保留 reduced-motion fallback。

AI 生成的“感觉”不会变成视觉噪音，而是真正服务于反馈、连续性或注意力引导。

四、技术原理、架构与实现

整体架构：Plain files, no build step, zero npm dependencies — deliberately boring to run.

●app/index.html：整个客户端（Home、Workbench、Video Editor、Library、i18n、暗黑模式）全部塞进一个文件。带来的好处是：秒开、完全离线可用、极易分发、无构建地狱。

●cli/bin/motion.js：单一文件同时承担 server + CLI。负责静态文件服务、project store、以及统一引擎调度层。它抽象了不同 Agent CLI 的输出格式（stream-json、JSONL、ACP JSON-RPC、plain text、BYOK 直接 API），对上层暴露一致接口。

●recipes/：核心资产库。每个 recipe 都是自文档化单元（yaml manifest + preview.html + impl + SKILL.md）。

●app/video/：画布合成器 + WebCodecs MP4 导出 + 内置 mp4-muxer + gifenc（MIT）。

●skills/：router meta-skill + 230 个便携 companion skills。

●tools/ + gallery/：辅助脚本与静态画廊。

关键技术实现：

1.shaderbg.js（WebGL 零依赖 runner）

58 行左右的极简工具，供所有 GPU shader recipe 使用：

○自动检测 WebGL 1/2（看 shader 源码是否含 [#version]() 300 es）。

○固定全屏三角形 vertex shader + 用户提供的 fragment shader。

○自动注入 uniforms：uTime/iTime、uResolution/iResolution、uMouse（pointer tracking）。

○支持自定义 uniforms（1f/2f/3f/1i 等多种类型）。

○Resize 监听 + RAF 循环 + prefers-reduced-motion 自动降级（静态或停止）。

○返回 {gl, program, canvas, set(name, spec)} API，recipe 可在运行时动态改 uniform（如点击 ripple）。

这就是为什么 strands、silk、faulty-terminal、pixel-blast 等效果能纯两个 script 标签跑在任何页面，无 three.js、无 build。

2.MOTION-SPEC.md 品味引擎

不是建议文档，而是可执行契约：

○第一性原理：motion 必须有意义（feedback/continuity/attention）、被感受而非被注意到、restraint 是工艺、性能是品味、无障碍非可选。

○时长 token（instant 80-120ms → cinematic 800-2000ms）、缓动 token（ease-out 默认，spring-soft/snappy）。

○Restraint budget（per viewport）：celebratory ≤1、同时 entrance ≤3 并 stagger 40-80ms、最多一个 ambient loop、绝不 auto-play delight。

○性能铁律：只 animate transform/opacity，will-change 慎用且用完即删，目标 60fps，动画结束后清理 DOM/timer。

○分类 taxonomy + 意图映射表（snappy → hover-press/state-transition；delightful → feedback-delight 等）。

○Definition of done checklist。

3.Recipe 增加黄金路径（AGENTS.md）

任何 Agent（包括未来版本的自己）都能遵循：mkdir → 写完整 yaml（灵魂三字段必须）→ 自包含 preview.html → 实现文件 → SKILL.md。项目把“怎么正确增加动效”也做成了可 Agent 化的协议。

4.视频导出双路径

○WebCodecs + mp4-muxer：纯浏览器、确定性、零外部依赖。

○HyperFrames：真实 Chrome + FFmpeg，处理复杂 CSS/WebGL，但需额外工具链（项目明确列出限制：不能 seek JS 时钟/WebGL 内部时间等）。

5.与 Open Design 生态的真实互操作

每条 recipe 都是兼容 SKILL.md；59 个 brand packs、58 个 HyperFrames 模板、112 个 HTML 原型模板、2680 个图标全部共享；Open Design Cloud 是第一等引擎。形成“设计系统 → 页面生成 → 动效精修 → 技能复用”的完整闭环。

源码可维护性设计：AGENTS.md + PROGRESS.md + MOTION-SPEC.md 让任何 coding agent 冷启动都能继续开发；ATTRIBUTION.md 清晰记录 35 个 port 的授权来源（react-bits 作者许可）+ vendored MIT 库。

定位非常清晰：不是 standalone 工具，而是 Open Design 家族的 motion layer，专注把“动效品味”产品化、本地化、Agent 化。

motion-anything 把过去散落在 GSAP/Framer/Lottie/ShaderGradient 等库里的专业实践，通过 manifest 契约 + 可视化编辑器 + 零依赖 runner + 多引擎调度，做成了一个本地可立即运行、Agent 可深度参与、输出可无限复用的系统。真正解决了“AI 生成页面动效死板/没品味/难调整/有锁”的四大问题，同时保持了极致的本地隐私与零成本。

建议上手路径：

1.按 Quickstart 启动（30 秒）。

2.先在 Library 里玩 10 个真实 preview（感受 restraint 的力量）。

3.用一句带意图关键词的 prompt 生成一个页面，进入 Workbench 逐组件打磨。

4.尝试导出 SKILL.md 丢进你的其他 Agent 项目。

5.有 shader 需求时，研究 _fx/shaderbg.js 如何把复杂 GLSL 变成两个 script 标签。

—— 如此才是

把复杂的技术，讲成你真正能用上的生产力

终端文件管理天花板！superfile 17.8k Stars 现代 TUI 神器：多面板·视频预览·插件扩展 + 高效使用 + 源码构建

软件实现多机键鼠+剪贴板共享，QUIC加密低延迟边沿切换，开源神器MyKVM

Rust版tmux来了！RMUX原生跨平台+类型SDK+浏览器加密共享

2026 开源设计工具最强黑马！OpenPencil 7MB AI 原生编辑器：全编程接口 + P2P 协作 + Figma 兼容深度测评