不用视频生成模型，他们用代码画了每一帧

一条推文列了18个开源仓库，覆盖场景、时间轴、矢量、粒子、导出。配了一段视频，画面在按钮、加载器、播放器、滑块、图表、菜单之间切换，全部由代码画出来。

但工具列表本身不是重点。重点是后面那篇文章里讲的事：怎么用这些仓库搭一套可重复的视频生产系统。

先搞清楚它到底在做什么

常见的AI视频工具，生成的是像素。你给一段描述，模型吐出视频文件，改一个字就得重新生成。

这套东西不一样。模型写的是代码，代码定义每一帧长什么样。一个叫seek(t)的函数控制任意时刻的画面。浏览器渲染帧，FFmpeg把帧序列编码成MP4。

因为动画是数学定义的，你可以改时间、颜色、文字、运动轨迹，不用重新生成整段视频。输出的不是视频，是可编程动画。

这个区别决定了后面所有事。

18个仓库，按活儿分工

原文把仓库列成了一张清单，用的时候不需要全上，关键是知道每个解决什么问题。

渲染和框架这块，Remotion是主力，用React组件渲染视频，支持参数化。同一个composition传入不同数据，产出不同结果。配套的Remotion Agent Skills可以用npx skills add remotion-dev/skills安装，给Claude Code这类编码agent提供composition、动画、字幕、渲染方面的指导。Motion Canvas是另一个选择，用TypeScript生成器写动画，带实时预览，适合做信息型矢量动画和配音同步。

动画库里，Motion（原Framer Motion）处理布局过渡，Anime.js管时间轴和错峰，Shifty负责补间播放和缓动，Ola做平滑值插值，TweenJS做序列属性动画。

2D和矢量方向，Two.js画动画2D矢量场景，Lottie Web播放矢量动画，Konva做交互式canvas动画。

3D方面，Three.js、Babylon.js、LUME都能用，Godot提供游戏动画系统，Blender负责骨骼和角色动画。

专门用途的，Manim做数学动画，gifenc编码GIF，Proton做粒子发射器和行为。

原文作者的选择是：主要用Remotion搭可复用的商业模板，同时理解seek(t)的原理。HyperFrames作为备选，适合习惯用HTML和CSS思考的人。

工作流里几个容易被忽略的设计

文章给了一套完整的系统架构：Brief → 结构化数据 → 动画引擎 → 帧审查 → 视频渲染 → 多版本输出。其中有几个点值得单独说。

brief和动画代码要分开。 大多数人的做法是给Claude一段描述，直接让它生成动画。实验可以，做客户项目会出问题。正确的方式是把品牌、素材、场景、时长整理成一个JSON文件，动画引擎读这个文件。换客户只换数据，不重写引擎。

seek(t)必须是时间的纯函数。 30fps下25秒视频有750帧。渲染器要能直接跳到第600帧，不依赖前面599帧的状态。这意味着不能用计时器驱动的CSS过渡，不能用有状态的逐帧模拟，不能有“因为之前发生过什么所以现在这样”的逻辑。每个可见属性都从时间戳算出来。

弹簧动画要用闭合形式。 普通弹簧模拟依赖上一帧的状态，和纯函数渲染冲突。闭合形式弹簧的写法是：value(t) = initial + Σ(targetChange × springResponse(t - changeTime))。每次目标变化贡献一个响应，整体可以在任意时刻求值。

UI动效的几个细节。 移动的标签指示器，前后边缘用不同的弹簧参数，前缘先动，后缘跟随，中间短暂拉伸再落位。按钮展开成卡片时，容器先动，文字后出现，避免重叠。这些时序差决定了动画看起来“贵”还是“廉价”。

音轨当时间轴的一部分。 不要渲染完再配音乐。先分析音轨的节拍和峰值，把按钮点击、图表完成、转场、logo出现绑到具体时间戳上。

质量控制是最容易跳过的一步

Claude能写代码，也能看渲染出来的图。两个能力都要用。

文章建议分五轮审查：先看storyboard，每个场景抽几帧，确认叙事连贯；再看转场前后的帧，找文字重叠、元素消失、跳变；然后把预览缩到手机屏幕尺寸，检查可读性；再对品牌素材和事实声明；最后看完整视频和音频。

FFmpeg可以生成contact sheet：ffmpeg -i output.mp4 -vf "fps=1,scale=270:-1,tile=5x5" -frames:v 1 contact.png。但等间隔采样不够，转场前后的帧要单独抽。

有一条规则写得很直白：不要相信一个没看过渲染输出的agent说“动画看起来不错”。审查报告要列出检查了哪些时间戳、发现了什么问题、修了什么、还剩什么疑虑。

商业侧的判断

文章提了一个campaign矩阵的思路：3个钩子 × 3个格式 × 2个CTA = 18个导出。但不是把同一个视频裁成不同比例。竖版可能堆叠组件，横版可能并排。共享运动时序和场景数据，布局约束按格式单独算。

缓存不变的部分，只重渲染需要变的。存一个manifest记录源素材、campaign数据、模板版本、渲染设置。

定价按交付物算，不按prompt数量算。文章给了一个假设性的750美元发布包，明确说这是示意数字，不是市场价或收益保证。

一个反例

文章里引用了@mablesjoseph做45秒水彩动画短片的例子。创作者说用了163次模型调用和数小时工作。原文对此的评论是：打磨过的结果不总是第一次的结果。

这大概是整篇里最值得记住的一句话。工具列表看起来像“拖进去就能出片”，实际工作流里有大量验证、审查、返工的环节。自动化一个平庸的动画，只会得到更多平庸的动画。

真正的机会，用文章的话说，是把动效设计师的重复生产工作变成软件，不是用prompt替代设计师。构图、节奏、叙事、品牌识别、视觉层级，这些判断仍然在人这边。但一旦视觉系统设计好了，文本、颜色、布局、序列、变体，相当一部分生产工作可以编程化。

一个好视频是作品集。一套可复用的动效引擎是资产。