最近用代码做视频的案例非常多，有人靠这个迅速起号，有人拿来做产品宣传。3D 小岛、水彩 MV、手绘线条等各种风格涌现。
这些效果挑战认知：模型只产出一段代码，就做出了能媲美视频模型的效果。视频模型直接生成每一帧的像素，而代码模型只写程序，画面由浏览器或渲染引擎一帧一帧算出来。
代码做出来的效果可以媲美视频模型。那么代码模型一个像素都不画，是怎么做到 3D、水彩、手绘、数学板书这些风格的？
不同风格，只是同一个函数交给了不同的工具去画。就像小时候的翻页动画书：每页画一张，快速翻过去，画面就动起来了。用代码做视频，就是让程序替你画每一帧画面。
用视频模型生成画面，每次抽卡结果都不一样，想改一个细节很难。代码不一样，同一份代码渲染 100 次结果一模一样。可复现、能精确修改，这是代码动画相对 AI 视频最实在的好处。
类型一：HyperFrames、Remotion、Motion Canvas
这一类是现在最主流的路线。画面写成网页，让一个看不见的 Chrome 浏览器去截图。原因很朴素：模型写网页的能力最强，出错率最低。
1 HyperFrames
HyperFrames 是 Heygen 开源的 AI 动画工具，思路是把视频当一个网页来写。文字是 HTML 元素，卡片是 div，动画交给 GSAP 时间轴。渲染时框架跳到第 n 帧，截图，再拨下一帧。
2 Remotion
Remotion 提供 interpolate（帧号换算数值）和 spring（带回弹的弹性效果）等工具函数。它比 HyperFrames 门槛高一点，要懂 React。好处是多场景拼接、字幕逐词对齐、批量模板特别顺手。
3 Motion Canvas
Motion Canvas 让你按时间顺序写剧本，自带代码块组件，很多编程教学视频都用它做。
类型二：手绘线条、分层插画、水彩
代码画出来的东西最容易被吐槽太规整。下面这些库专门解决这个问题。
4 rough.js
rough.js 画一条直线时，会给端点加随机偏移，再用两三条略有不同的曲线叠起来，看着就像铅笔描了两遍。
5 分层插画
把一张插画拆成天空、太阳、远山、近山、树、文字几层，每层错开半拍出场。描边像笔一样画出来，靠的是 SVG 的虚线长度和偏移量动画。纸拼贴风格的科普视频也是这个原理。
6 p5.brush 水彩笔刷
p5.brush 给一个形状生成 40 多个略有差异的版本，每个只用 4.5% 不透明度叠上去。中间被盖了几十层颜色深，边缘只盖了几层颜色浅，晕开的感觉就出来了。它把这套算法和铅笔、马克笔、炭笔等笔刷打包好了。
类型三：数学板书和地图路线
7 Manim
Manim 是 Grant Sanderson 写的开源组件。它把画面里的东西都当成数学对象：曲线是函数，公式由 LaTeX 渲染成矢量路径。动画就是两个状态之间的插值。
8 地图路线动画
口播讲到哪，线就画到哪。用代码反而很简单：先做好配音，用 TTS 打出每句话的时间戳，每句话对应路线上的一个点，两句话之间路线进度从上一个点平滑走到下一个点。
先有音频，再做画面。作者自制的 map-motion skill，底图用高德地图，路线也是高德算出来的真实驾车、步行、骑行路线。让 AI 写一份镜头表 JSON 文件，它去高德解析地名、取路线、算镜头，再用 Chromium 逐帧画，最后交给 FFmpeg 出 MP4 和 GIF。
类型四：3D 视频
9 three.js
three.js 在网页里搭 3D 场景，三样东西：物体、灯光、镜头。做视频的关键是镜头。先用几个点连成平滑曲线，第 t 秒时镜头放在曲线上对应位置，朝着稍靠前一点的地方看。
10 Blender
黏土质感、真正的 3D 角色，还是得 Blender。现在有个 Blender MCP 插件，能让 AI 直接操作 Blender：加球体、换材质、打关键帧。AI 还能要截图检查画面对不对再改。
如何选择
上面介绍的开源项目都有官方制作的 skill，可以保存项目关键词，给模型描述时用对应技术制作动效。
如果只能挑一个先学，建议 HyperFrames：开源生态最丰富，模型写 HTML 最稳。rough.js、p5、three.js 这些库都可以塞进 HyperFrames 的网页里一起渲染。
