【免费下载链接】claude-motion
A motion design toolkit for coding agents.
claude-motion 是一个面向编码 Agent 的动效设计工具包(motion design toolkit),它用可量化的"品味规则"教会 AI 做出有质感的动态视频。本文将带你完成两条贡献路径:把用 claude-motion 制作的视频加入官方 Gallery 画廊,以及向.claude/skills/中的品味规则提交改进 PR。无需设计背景,只需会用命令行。
为什么值得向 claude-motion 贡献
与其他动效项目不同,claude-motion 的核心资产不是代码,而是写进技能文件里的设计品味:缓动曲线用bezier(0.16, 1, 0.3, 1)这样的具体数字描述,声音由纯 Python 合成器实时生成,Agent 还能通过逐帧截图自检画面。贡献一个作品或一条规则,等于让所有使用者的 Agent 产出都变好一档。
贡献入口在 CONTRIBUTING.md,官方目前只收了两类贡献:Gallery 作品和规则改进。
四步把视频加入官方 Gallery 画廊
官方画廊位于主 README.md 的 "Gallery" 表格,目前只有第一个示例,你的作品可能就是第二行:
- 把合成放进
src/。可以新建独立文件夹,然后在 src/Root.tsx 中注册你的<Composition>,参考现有的EffortVideo写法。 - 创建示例说明页
examples/NN-short-name/README.md。直接照抄 examples/01-effort/README.md 的结构:预览 GIF、你给出的完整 Prompt、耗时、所用模型与 effort 级别、Agent 自主完成的过程。 - 在 README 的 Gallery 表格加一行,链接到你的示例目录。
- 提交 PR。只想展示而不想合入?官方也欢迎开 Showcase issue 分享。
💡GIF 要控制在 ~4 MB 以内。项目里
npm run gif的 ffmpeg 参数(12 fps、420px 宽、调色板量化)就是官方推荐起点,见 package.json。
官方示例 examples/01-effort/ 的说明页就是一个满分模板:22 秒成片,一条 prompt + 一次修改,还附上了从分镜到响度母带的完整过程表格。
先读品味规则,做出合格的动效作品
Gallery 审核看的不只是"能动",而是是否遵循了这套可量化的动效设计规范。核心规则都在.claude/skills/下:
| 技能文件 | 管什么 |
|---|---|
| motion-design/SKILL.md | 时间轴、缓动、弹簧、字体、色彩、质感、转场 |
| review-loop/SKILL.md | 渲染草稿 → 逐帧截图 → 对照清单自检 → 修改的循环 |
| sound-design/SKILL.md | 用sfx/引擎写 cue sheet,声音与画面共用 timeline.json |
| web-sims/SKILL.md | 粒子/3D 仿真类视频的第二条管线 |
几条最常踩的品味要点(完整版见 motion-design 技能):
- 时间只存在于
timeline.json。组件里禁止硬编码起始时间,重排节奏 = 改 JSON 后重跑npm run sfx,声音自动跟随。 - 出场比入场快一倍:出场 0.35–0.55 s、入场 0.7–1.25 s,出场用
easeIn。 - 阅读停顿(hold):每个可读状态至少停留 1 s,结尾金句 ≥ 2 s。
- 每帧只有一个焦点,内容距画面边缘保留约 60 px 安全区,第 0 帧不能是黑屏(它会被当作缩略图)。
Agent 的自检靠"联系表"(contact sheet):每个时间轴节拍渲染一帧,拼成一张带时间戳的图供逐格检查。这就是 media/sheet.png 展示的画面:
对应命令:npm run sheet生成节拍联系表,npm run sheet -- --from 3 --to 5 --every 0.2可逐 0.2 s 细查某个转场。声音侧用npm run wave检查波形,每个瞬态音应落在时间轴节拍线上,响度自动母带到 −14 LUFS。
如何改进品味规则:带数字的 PR
.claude/skills/是 claude-motion 的心脏。CONTRIBUTING 对规则类 PR 只提了两句要求,但很具体:
- 规则尽量带数字——不写"更顺滑一点",而是写"入场用
bezier(0.16, 1, 0.3, 1)""词与词 stagger 0.09 s"这类可执行的参数; - 附上
npm run sheet产出的 before/after 联系表,让评审直接看到改进前后的画面差异。
一个好的改进 PR 通常是这样的闭环:你在自己的视频里发现某条规则明显提升了成片质量 → 定位到具体参数 → 用联系表证明前后差异 → 提交 PR。完整的声音设计示例可参考 sfx/cues/effort.py(128 个声音 + 一个铺底 pad,全部时间来自时间轴)。
快速上手:本地环境与构建命令
贡献前先跑通示例,确认工具链无误:
git clone https://gitcode.com/gh_mirrors/cl/claude-motion && cd claude-motion npm install npm run build # 声音 + 渲染 + 混流 → out/effort.mp4环境要求:Node 20+、Python 3、ffmpeg。做完作品后常用命令速查:
| 命令 | 作用 |
|---|---|
npm run studio | 实时预览所有合成 |
npm run sheet | 生成节拍联系表,用于视觉自检 |
npm run wave | 波形 + LUFS + 真峰值检查 |
npm run gif | 导出符合 Gallery 体积要求的预览 GIF |
python3 -m sfx --list | 查看声音生成器清单 |
如果做的是仿真类视频(粒子群、3D 飞越镜头),走sims/管线:每个作品一个 HTML 页面,render(t)是时间的纯函数,再由无头 Chromium 逐帧捕获成 60 fps 视频。详见 sims/README.md 与三个可拆解的示例(sims/crawlers/、sims/dossier/、sims/engine/)。
提交 PR 前的小结清单
- 合成已注册进 src/Root.tsx,
npm run build能出完整成片 - 示例页包含:预览 GIF(< 4 MB)、原始 Prompt、耗时、模型与 effort 级别
- 主 README 的 Gallery 表格已加行
- 规则类改动:参数具体 + before/after 联系表齐全
- 声音响度 −14 LUFS ±1,真峰值 ≤ −1 dBFS(
npm run wave确认)
claude-motion 的画廊在等第二个作品,品味规则在等下一个数字。现在就 clone 下来,跑通npm run build,开始你的第一条 PR。
【免费下载链接】claude-motion
A motion design toolkit for coding agents.
相关推荐
如何用开源提示词优化工具提升AI对话效果:5分钟快速上手指南
如何用开源提示词优化工具提升AI对话效果:5分钟快速上手指南 你是否经常遇到这样的困扰:向AI助手提问时,得到的回答总是泛泛而谈?想要让AI完成专业任务,却不知
人工智能AI 应用提示工程MCP 服务前端后端eCapture商标与品牌指南:社区贡献者使用规范
eCapture商标与品牌指南:社区贡献者使用规范 eCapture作为一款基于eBPF技术的TLS/SSL明文捕获工具,其品牌标识和视觉资产是社区共同财富。为
网络安全eBPF网络加入创作社区:Ascii-Motion 贡献指南、路线图与生态支持全览
加入创作社区:Ascii Motion 贡献指南、路线图与生态支持全览 Ascii Motion 是一款现代化的 ASCII art 创建与动画工具 (Web
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考