用代码做动画：把「Vibe Motion」拆成可复现的步骤

00导读：先搞清楚值不值得学

这 48 条里，大部分是作品展示和大模型测评，真正在讲「怎么做」的只有下面这些。我把它们按学习价值排了序：

01他到底在做什么

一句话：自然语言 → AI 写代码 → 代码渲染成画面。

为什么要多这一步？

因为有一类画面，端到端的图生视频根本做不到。他自己反复举三个例子：

• 精准跟随——一条鱼要实时跟着你手指动。「目前的图生视频技术还没有办法做这么精准的跟随。」
• 精准物理——弹弓的橡皮筋回弹。「即使强如 seedance2，在面对需要精准物理计算时都显得有心无力。」
• 精准数值——鱼群的上万个体、飞行器的轨迹，每一帧都要对得上。

他给的配比很实在：

剩下 5% 他没说，大概是实拍和人工剪辑的部分。

这套东西和「让 AI 生成视频」的本质差别

这张表里最关键的是第三行。他在数字艺术那期说得很直白：

02五条心法

这五条是贯穿他所有视频的底层方法，比任何具体技术都重要。

心法一：面向对象，而不是面向过程

这是他讲得最重的一条，在速成班和数字艺术两期各讲了一遍。

同一个弹弓，两种写法：

面向过程的写法你写一百句也写不完，因为每个瞬间都要描述；面向对象的写法三四句话就定义完了整个系统，剩下的交给物理引擎逐帧去算。

数字艺术那期他补了一个更精确的说法：

举个例子：思花作品《解药》的核心不是「药片飘动」，而是构建那个包裹药片的薄膜。薄膜建好了，动起来是必然的事。

心法二：从简单到复杂，先用几何体

他管这个叫 procedural mesh（程序化模型）：模型等价于一段代码，可以让 AI 生成，你只需要给出喜好——高矮胖瘦、用什么颜色。

这个习惯解决的是一类很常见的失败：新手一上来就要「一条逼真的沙丁鱼」，AI 给你一个模型，你连它为什么不动都看不出来。先把鱼变成圆锥，运动对了再换模型，问题立刻变得可定位。

心法三：用 Git 做子目标拆解（最重要的一条）

如果你只记一条，记这条。这是「为什么我 vibe 不出复杂动画」的标准答案。

具体操作步骤：

1. 选一个已有的开源 demo 做起点。他 vlog 里的 3D 屏幕动画，起点是一个 three.js 官方展示案例——因为它已经完成了「把 HTML 贴到 3D 屏幕上」这个子目标。
2. 界面只留三块：左边 VSCode 看代码和 git，右边浏览器看效果，下面终端跑 AI。三个东西同屏，改完立刻看到。
3. 装 Git Graph 插件。VSCode 自带的 git 面板太小，看不到项目目录。Git Graph 会在左下角加一个按钮，点开是完整的分支树。
4. 把 commit message 翻译成中文。他直接给 AI 一句提示词，把 AI 自动生成的英文提交说明改成中文——因为每次存档你都要回头读，读得懂才用得起来。
5. 每完成一个子目标 → commit。然后开新对话（清空上下文），再做下一个。这一步很多人省掉，结果上下文越来越长，AI 开始忘事、开始改坏前面的代码。
6. 卡住就 reset。回退到上一个存档点，把提示词改得更具体，或者让模型「想久一点」，再来一次。
7. 分支 = 支线副本。要试一个新效果但怕搞坏主线，就开分支；成了 merge 回来，废了直接删。

心法四：真实感来自观察，不来自提示词

他举了两个具体例子，这两个例子本身就是可以直接抄的细节：

• 过冲回弹：「弹弓的弹性绳释放后并不会立即停止运动，而是会过冲再回弹，反复几次后直到能量消散。」——一个阻尼振荡，加上去质感立刻不一样。
• 动态模糊：「当你用相机拍摄高速物体时，成像会有残影，所以我就告诉它，在弹弓速度大于一定阈值的时候，给它加上动态模糊的效果。」——注意这里的关键是阈值触发，不是全程加。

心法五：借力已有的代码，不要从零 build

他的态度很明确：不是所有物理对象都要自己写。三条借力路径：

• openprocessing.org——上面有大量物理对象的开源实现。他提到一个叫 broken glass 的作品，思花老师好几个片子都是从它魔改的。
• GSAP 官方 demo / CodePen——找现成动效，导出代码再让 AI 换内容。他的流程是：点 CodePen → 右下角 Export → Export Zip → 解压得到代码。
• GitHub 作者本人——这条最有意思，见案例四。

03技术栈：他实际用的东西

写代码的 Agent

渲染 / 创意编程引擎

专项库

他自己做的脚手架与社区

• npx create-vibemotion --vibemotion —— 一条命令搭好本地 2D 开发环境，预览、调参、渲染都集成好了。
• vibe-motion-skills —— GitHub 仓库，把动效做成 skill，Agent 装上就能对话出片。
• motion-face —— 「一人复刻，万人共享」。跳过最耗 token 的复刻步骤，直接解锁别人复刻好的代码工程。

导出格式怎么选

04六个案例，由浅入深

每个案例都写了：目标长什么样、按什么顺序拆、真实提示词、卡点在哪。建议按顺序做，前一个做完再开下一个。

create a webapp using vanilla js, html, css, modern threejs, mediapipe. 如果 mediapipe 来自 CDN，要用常规的 <script> 方式引入变量。

画面中是由大量球形小的粒子构成的一个绚烂的橙色的星球，星球球面应该能显现出来（可能在球面聚集了更多的粒子）。周围环绕着白色的粒子，构成星球的两层环绕星环。

摄像头的中心一直对着星球的中心，可以通过用户的手势控制摄像头，用户旋转手的时候，摄像头会随之旋转，就像星球在同步的顺时针或逆时针旋转；当握拳并拉远摄像头的时候，相机会较快远离星球，速度先慢后快，而当 5 指张开并靠近摄像头的时候，摄像头会快速靠近星球，速度先快后慢（摄像头距离星球的中心有个最小距离）。

用 Godot（GDScript）/ 或用 p5.js 做一个 2D 弹弓 Demo。

对象定义：
1. 弹弓躯干：Y 字形，固定不动。
2. 弹性绳：两个状态。拉动时，绳的终点跟随鼠标位置；释放时，根据拉动距离给弹丸一个正比于偏移量的初速度，然后绳立即回到初始状态。绳的运动要有过冲——释放后不会立即停止，会反复回弹几次直到能量消散。
3. 弹丸：刚体，不受形变影响，受重力作用有向下加速度。
4. 环境：四周设置碰撞体，弹丸撞上会被弹开。

画面：背景简洁，弹弓居中偏下。当弹丸速度大于某个阈值时，给弹丸加上动态模糊，模拟相机高速拍摄的残影。

请使用 p5.js 开发一个多关节跟随系统的视觉 Demo。核心需求是实现一条由 N 个圆形节点构成的链式结构（例如 20 个节点），节点间通过线段连接。首个节点（头节点）的位置需实时跟随鼠标光标，对于后续的每一个子节点，必须严格维持与前驱节点的固定距离（如 30px）：在每一帧更新位置时，通过计算向量差，将子节点的位置修正到以其前驱节点为圆心、固定距离为半径的圆周上，方向取自子节点当前位置指向前驱节点的方向，从而实现自然的"拖拽"或"蛇形"跟随效果。视觉呈现上，背景设为深色，节点用实心圆表示，连接线用白色线条，整体需保证交互流畅，代码结构清晰以便调整节点数和段长。

用 Python 写一个最优控制仿真，再用 Three.js 渲染成动画。

建模：
- 状态量：高度 h、竖直速度 v、剩余燃料质量 m。
- 控制量：底部喷口开度 u，取值 0~1。
- 推力正比于 u，耗气速率也正比于 u，总气量有限。

代价函数：
1. 触地瞬间 |v| 越大代价越高；
2. 触地时车身倾角越大代价越高；
3. 下落过程中速度过快也要加惩罚；
4. 总耗气量计入代价（权重可调）。

用 MPC 求解，输出每一时刻的 u 序列。
请分别跑两组：一组不含耗气惩罚，一组含耗气惩罚，对比总耗气和落地姿态，并画出 u 随时间的变化曲线。

帮我 coding 一个帧同步小游戏。

先记住三条原则：
1. 逻辑和画面分开计算；
2. 只用整数，不用浮点数；
3. 随机数共用一个种子，且调用顺序必须一致。

剩下的游戏玩法，vibe different。

还有一条值得单独看：实拍 + AIGC 混合

拜占庭那期不是 Vibe Motion，但方法很实用，尤其是怎么把抽卡成本压下来。

• 先用便宜模型抽：找到一个平台的 flash 模型免费、支持 12 秒生成、支持全能参考模式（提示词 + 多模态输入都能试）。满意之后再切满血版做成片——「抽卡成本降低到原来的 1/5」。
• 让 Agent 先查资料：普通文生视频没有联网能力，会搞错地理方位。Agent 模式会先联网确认知识，甚至写 Python 脚本做测量标注。
• 先出分镜图再生成视频：复杂镜头先让它生成一个 6 宫格 storyboard，把故事板当参考图，分镜就被控制住了。

05把能力做成 Skill：sound skill 的完整方法论

这条视频点赞只有 5245，但方法论价值是全账号最高的。他做的不是「一个音效工具」，而是一套「AI 缺某种感知时，怎么给它补上」的通用流程。

第一步：发现问题在哪

他先观察到一个现象：Claude 做视觉时经常生成一类叫 CMP（compare） 的图——并排陈列几个不同的视觉方案，经过很多轮比较才打磨出好的动效。它能看见，所以能比较。

但声音这块：

第二步：把模糊问题拆成可分类的子问题

他把「音效不好」粗浅地归为两类：

关于合成器他讲了一段很开脑洞的：合成器原理就是振荡器出基础波形、ADSR 包络决定起音和衰减、滤波器修音色。但合成器不是万能的——星战光剑声是把老式放映机马达的嗡鸣和电视显像管电流干扰混出来的，激光枪是拿扳手敲无线电塔钢拉索录的；阿凡达的雨林是录了成吨真实的雨、动物、水流声。纯粹数学合成的声音，人耳一听就知道假。

第三步：给 Agent 补「可判断的锚点」

这是全篇最核心的一招。他对比了几个免费音效库的元数据丰富度：

为什么这招有效：Agent 听不见，但它能读数字。给它一个带人类反馈的库，等于把你的耳朵借给了它。

第四步：用 A/B 盲测做决策，而不是拍脑袋

这是整条视频最硬的一段。他怀疑「搜索顺序」会影响最终质感，于是设计了一个 harness：

• 固定同一段 7 秒产品动效：标题飞入 → 4 张卡片弹出 → 开关打勾 → 翻页 → logo 落地。
• 让两个 Agent 分别挂载只有搜索顺序不同的两个 skill。
• 人耳盲测（他不知道哪段是哪个）。

结论：A 更好。A 就是「优先搜索带人类反馈的音效库」。唯一例外是开关心——B 里 Kenney 专门做的 UI 音更合适，虽然 freesound 那个真实手电筒开关评分也不错。

于是 skill 里加了一条补丁：UI 音优先 Kenney。这样反复迭代，才有了 sound skill。他前两期百万播放的视频音效，就是 Agent 用这个 skill 自己配的。

06完整生产流水线

把上面所有东西串起来，一条片子从想法到发布是这样的：

1. 选题：找一个「用现成 AIGC 做不出来、但用代码能算出来」的效果。判断标准很简单——能不能用一句话说出它的数学/物理规则。
2. 写对象清单：不看画面，只列「有哪些对象、各有什么属性、彼此怎么作用」。这一步在纸上做，比在 AI 里试快十倍。
3. 拆子目标：把「做出成品」拆成 3~8 个可验证的小目标，比如「先把 HTML 贴到 3D 屏幕上」「先让一个球受重力落下」「先让链子跟着鼠标」。
4. 搭环境：npx create-vibemotion --vibemotion，或者干脆一个 index.html + 本地浏览器。VSCode 装 Git Graph。
5. 逐个 vibe + 存档：做一个 commit 一个，然后开新对话做下一个。卡住就 reset。
6. 加真实感：过冲、阻尼、动态模糊、微小的随机性。这一步决定「像不像」。
7. 加音效：Agent 读帧号自动卡点，音色靠带标注的库。
8. 导出：需要透明就用 ProRes 4444，不需要用 H.264，中间产物用 PNG 序列。
9. 剪辑合成：剪映。他不建议为此装 PR。

0730 天复现计划

按他自己视频的难度梯度排的。每天 1.5~2 小时，周末可以多花点。

自检清单

每次开工前问自己这五个问题，能省掉大半返工：

• 我在描述画面还是在描述对象？（心法一）
• 这个效果能不能先用一个几何体跑通？（心法二）
• 我是不是想一次做完？能不能拆成三个 commit？（心法三）
• 这个运动在现实里是什么样？有没有漏掉阻尼、惯性、模糊？（心法四）
• 这个效果有没有人已经做过？openprocessing / CodePen / GitHub 上搜了吗？（心法五）

什么时候该放弃 Vibe Motion

• 需要真实人物、真实光影、真实质感——交给图生视频。
• 需要一次性的、不复用的镜头——抽卡更划算。
• 你说不清规则，只有感觉——那说明它不适合被代码描述。

08坑与提醒

09附录 · 原片索引

本地视频都在 media/videos/，下面是编号对应。点击标题可跳原笔记。