claude-motion 教程：给编程代理的 Remotion 动效与网页仿真出片工具包（2026）

推荐链接（推广）：数字严选大约 11 分钟AI 视频Opus 5.5 做视频Claude Code 视频claude-motionRemotion运动图形

阅读说明

仓库信息查阅日期：2026-10-23；星数、更新时间会变，以仓库页面为准；本文不写价格。

名称别混淆

这是 GitHub 上的第三方开源项目 whaleyxbt/claude-motionopen in new window，和 Anthropic 官方的 Claude Motion（Team/Enterprise 测试版功能，见 Claude Motion）不是一回事。

一句话结论

whaleyxbt/claude-motionopen in new window 是给编程代理用的动效工具包。运动图形走 Remotion：代理按写明数字的缓动和弹簧做画面，用接触表自查每一拍，再用纯 Python 合成音效。点子若是仿真或三维，改走 sims/，把单个 HTML 页面逐帧录成 60 fps 视频。

适合已经在用 Claude Code、Cursor、Codex 或 OpenCode，并希望画面、声音和检查读同一条时间线的人。README 写可以搭配官方 Remotion agent skillsopen in new window：官方技能覆盖 API，这个仓库是上面的设计层。

仓库信息

截至 2026-10-23，星数、最近推送和创建时间取自仓库元数据，日期为北京时间。

仓库星数最近推送（北京时间）许可创建时间
whaleyxbt/claude-motionopen in new window6262026-10-10MITopen in new window2026-09-30

仓库描述是 “A motion design toolkit for coding agents.” README 写明：本仓库代码为 MIT。Remotion 另有自己的许可，个人和小团队免费，超过门槛的公司需要 company license，条款见 Remotion Licenseopen in new window。

它能做什么样的视频

README 把成片分成两条流水线。

运动图形（Remotion）

画廊里的成品是 01 · Spending your effortopen in new window。AGENTS.md 写明示例 composition 叫 EffortVideo：22 秒，1080×1080，60 fps，用来讲 Claude Code 的 /effort。README 写这支片子来自一次提示加一次修改。可复用的画面包括遮罩文字、滚动数字、胶片颗粒、手绘线条抖动，以及带漂移网格和辉光的背景。

每支片子有一份 JSON 时间线。场景、声音和自查都读同一批命名时间点。改时间线时，声音和检查一起改。

声音引擎是纯 Python 标准库，README 写明 no samples。生成器覆盖打字、点击、pop、whoosh、riser、chime、impact、纹理和 pad。示例 cue sheet sfx/cues/effort.pyopen in new window 有 128 个声音加一条 pad。渲染命令会把母带做到 −14 LUFS，并把 true peak 保持在 −2 dBFS 以下。

网页仿真（sims/）

仿真是单个 HTML 页面，three.js 和字体内联，断网也能打开。浏览器里会循环播放：空格暂停，左右方向键定位，r 重来，f 全屏。render(t) 是时间的纯函数，代理和物理在加载时算好，任意一帧可以按需画。无头 Chromium 把页面逐帧送进 ffmpeg。

示例仓库写明的内容
crawlers一只蜘蛛代理每 2 拍加倍，从 1 只到 256 只，穿过 16 个虚构网站
dossier同一群代理对着一个虚构人物收集细节，红线把事实收进档案
engine一台甲烷火箭发动机：裙部打开，镜头穿过燃烧室和喉部进入羽流，再拆开又装回。声音由 Python 生成

sims/README.md 写明示例里的人物、品牌和域名都是虚构的，发动机上的数字是四舍五入后的教科书数值。每个示例的 DEFAULTS 里有 watermark，可以改成自己的 handle，或写成空字符串。

README 的捕获命令把 --size 1080x1350 标成 1440×1800、60 fps。sims/README.md 的说明是：版面按 1080×1350 来排，默认 dpr 为 4/3，输出就是 1440×1800。

需要准备什么

README 的 Requirements：

  • Node 20+
  • Python 3
  • ffmpeg
  • 系统里若有 /usr/bin/chromium，或设置了 $REMOTION_BROWSER，Remotion 用它。没有的话，第一次渲染时由 Remotion 自己下载浏览器

仿真另要 Chromium。README 和 sims/README.md 都写 npx playwright install chromium。sims/README.md 也写可以改用 $CHROMIUM。AGENTS.md 写捕获程序是 node sims/capture.mjs。

宿主：Claude Code 和 Cursor 直接加载 .claude/skills/。Codex、OpenCode，以及其他会读 AGENTS.md 的代理，要先读这些技能再改片子。

README 写明核心流程不需要 MCP，也没有写 API key。

安装与第一次运行

README 给了两条安装路径。

  1. 把下面这段交给 Claude Code、Cursor、Codex 或 OpenCode，让代理自己装：
Clone https://github.com/whaleyxbt/claude-motion and cd into it.
Check that Node 20+, Python 3 and ffmpeg are installed; install whatever is missing.
Run `npm install` and `npm run build`, then show me out/effort.mp4.
Then read AGENTS.md and the skills in .claude/skills/, and ask me what video I want to make next.
(For simulations and 3D, also run `npx playwright install chromium` and read sims/README.md.)
  1. 或者按 README 自己执行：
git clone https://github.com/whaleyxbt/claude-motion && cd claude-motion
npm install
npm run build        # the example video with sound → out/effort.mp4
npm run studio       # live preview

npm run build 是示例的一整条链：声音、渲染、混流，输出 out/effort.mp4。npm run studio 预览每一个 composition。

  1. 仿真流水线用 README 里的这三行：
npm install && npx playwright install chromium
npm run sims                                                    # → sims/dist/<name>.html
npm run capture -- engine --size 1080x1350 --out out/engine.mp4  # 1440×1800, 60 fps

sims/README.md 里还有检查静帧、指定输出路径，以及带音乐捕获的写法：

node sims/build.mjs
node sims/build.mjs engine

node sims/capture.mjs engine --stills 0,4,8,12,16,20 --cols 3 --out out/sims/engine-review.png

node sims/capture.mjs engine --size 1080x1350 --out out/sims/engine.mp4

node sims/capture.mjs crawlers --music path/to/track.mp3 --to 20 --out out/sims/crawlers.mp4

python3 sims/engine/sound.py
node sims/capture.mjs engine --music out/sims/engine/ambient.wav --music-start 0 --no-sync --lufs -24 --out out/sims/engine.mp4

同一页还列出 --config、--still、--fps、--dpr、--crf、--from、--to、--lufs。带音乐混流时，--lufs 的默认值是 −21。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。

装好后，README 给的运动图形提示是：

Make a 15-second 1080×1080 motion graphic announcing <your thing>.
Follow AGENTS.md: storyboard first, then the timeline, review loop, sound.

仿真用这一段：

Read sims/README.md and the web-sims skill. Build a 20-second sim of <your idea>
as one HTML page at 1080×1350. Review it with --stills before you render,
then capture it to a 60 fps mp4.

.claude/skills/ 里有四份技能：

技能README 写明的内容
motion-design缓动、弹簧预设、错开、阅读停顿、字号、单一强调色、纹理、有动机的转场。入场曲线示例是 bezier(0.16, 1, 0.3, 1)，出场时长是入场的一半，词与词间隔 0.09 秒
review-loop先渲染草稿，再按每一拍出一张带时间戳的接触表，检查碰撞、裁切、停顿、安全区和手机上的可读性
sound-design为 sfx 写 cue sheet，混到和画面同一条时间线，并做母带
web-sims仿真和三维：单个 HTML，逐帧录成 60 fps

AGENTS.md 把一支运动图形的顺序写成八步：先和用户对齐信息、分镜和那个主要瞬间，并询问画幅（1:1、16:9、9:16）、时长、品牌色和字体；把每一拍写进一份时间线 JSON；在 src/Root.tsx 注册 <Composition>，场景放在 src/ 下各自的文件夹；调色和字体集中定义；跑完 review loop；按同一条时间线写 sfx/cues/<name>.py；渲染、混流并检查成片响度；把片子和当时的提示放进 examples/。

同一文件给出的命令：

npx remotion render <Id> out/<name>-silent.mp4 --scale=0.5
npm run sheet -- --video <mp4> --timeline <json>
python3 -m sfx --list
python3 -m sfx sfx/cues/<name>.py
npm run wave -- <wav or mp4> --timeline <json>
npm run typecheck

混流：

ffmpeg -y -i out/<name>-silent.mp4 -i public/<name>.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -movflags +faststart -shortest out/<name>.mp4

示例片另有快捷脚本：npm run draft、npm run sfx、npm run build、npm run cover、npm run gif。

README 里的 cue sheet 是一个 Python 函数，时间全部来自时间线：

from sfx.synth import pop, whoosh

def score(mix, tl):
    s1 = tl["s1"]
    mix.put(s1["title"], whoosh(0.4, 500, 2400, peak=0.45), 0.12)
    for i, t in enumerate(s1["items"]):
        mix.put(t, pop(900 + i * 150, 400), 0.3, pan=-0.4 + i * 0.3)
    mix.typing(s1["typeStart"], s1["typeEnd"], chars=24)

python3 -m sfx sfx/cues/<name>.py 会渲染这份谱，做成母带，并写出 WAV。

README 还写了 Claude Code 的 /effort 和工序怎么对应：

阶段EffortREADME 的说明
Storyboard, message, hooklow来回快，人留在回路里
Building scenesmedium默认档，多数组件够用
Review loop, retiming, final polishhigh逐帧检查放在这一档
Make the whole thing, I'm going for coffeexhigh / max端到端自己做完，更慢

可选 MCP：README 写明不装也能做。需要时把 .mcp.json.example 复制为 .mcp.json，留下要用的项。

服务器README 写明它额外提供的能力
@remotion/mcpopen in new window可搜索的 Remotion 文档
ElevenLabsopen in new window配音，以及合成器做不出的声音
Playwrightopen in new window真实产品界面的截图，用来做动画
Figmaopen in new window从文件里取画板和设计 token

示例提示词（按 README 写明的用法改写，不是仓库原文）：

做一支 15 秒、1080×1080 的运动图形，宣布〈产品名〉。按 AGENTS.md：先对齐信息和分镜，再写 timeline.json，然后走 review loop，最后用 sfx 的 cue sheet 出声。先 npm run studio 预览，再渲染并混流成 MP4。

读 sims/README.md 和 web-sims skill。把〈想法〉做成 20 秒的单个 HTML 仿真，版面 1080×1350。先用 --stills 出检查图，确认后再 capture 成 60 fps 的 mp4。watermark 写成空字符串。

限制与已知问题

  • 代理不能看视频。README 要求先渲染草稿，再看每一拍一张的接触表，查完再改。
  • AGENTS.md 约定：动画是 useCurrentFrame() 的纯函数，不用 CSS 动画、Math.random() 或 Date；起点从时间线读，不写死在组件或 cue sheet 里；颜色和字体只来自该片的调色对象。
  • 仿真的 render(t) 同样必须纯。sims/README.md 写明捕获会在任意时间调用它。一个 NaN 像素会让整帧变黑。第 0 帧会被当作缩略图，打开时就要有内容。
  • 声音是程序生成的。README 把配音和合成不了的声音放在可选的 ElevenLabs MCP 里。
  • 本仓库代码是 MIT。Remotion 的许可单独计算，见上一节的许可链接。
  • 截至 2026-10-23，仓库没有 open issue。

常见问题

能不能用 Codex 或 Cursor？

可以。README 写明 Claude Code 和 Cursor 直接使用 .claude/skills/。Codex、OpenCode，以及其他会读 AGENTS.md 的代理也可以。快速开始那段文字把 Claude Code、Cursor、Codex、OpenCode 四个名字都写进去了。

成品是 HTML 还是 MP4？

运动图形的成片是 MP4。npm run build 输出 out/effort.mp4。npm run studio 是预览。npm run cover 会从同一条时间线导出一张静帧。仿真先得到 sims/dist/<name>.html，浏览器里能直接播放；npm run capture 或 node sims/capture.mjs 再把它录成 MP4。

商用和许可怎么算？

仓库里的代码是 MIT，见 LICENSEopen in new window。README 写明 Remotion 本身另有许可：个人和小团队免费，超过门槛的公司需要 company licenseopen in new window。仿真水印在各示例的 DEFAULTS 里，可以换成自己的 handle 或空字符串。

要不要 API key？中文配音呢？

README 没有写核心流程需要 API key，并写明 Nothing here needs MCP。可选的 MCP 包括 ElevenLabs、Playwright、Figma 和 @remotion/mcp，仓库没有写这些服务各自要准备什么凭证。中文字幕和中文配音 README 未写明。

相关阅读

参考来源

上次编辑于:
贡献者: Masoooon
小苔藓 AI 指南 · 数字严选内容站
Copyright © 2026 数字严选