20个开源仓库拼出动画工作室，0美元只是入场券

renproton 把 20 个开源仓库排成一条动画制作流水线，从第一帧到最终导出，标价 0 美元。原推里有一段成片预览，先看画面，再看清单。

这条清单覆盖动画、着色器、角色、音频、采集、审片、编码。它像把一间动态设计工作室拆成可替换的零件。动态设计指用图形、文字、运动讲清一个信息，产品发布短片是常见场景。工具免费，交付不免费。

1. Remotion：用 React 构建视频。
2. Anime.js：时间轴、缓动、运动编排。
3. Scene.js：CSS 关键帧与动画序列。
4. Konva：分层 2D 图形和动画。
5. Pencil2D：逐帧绘制和动画。
6. Zdog：伪 3D 插画。
7. Three.js：3D 场景、灯光、相机。
8. Filament：基于物理的灯光渲染。
9. ozz-animation：骨骼角色动画。
10. Planck.js：2D 物理和碰撞。
11. regl：自定义 WebGL 视觉。
12. WebGL Noise：程序化着色器效果。
13. meshoptimizer：让 3D 模型更轻、渲染更快。
14. MeloTTS：多语言配音。
15. RNNoise：神经网络降噪。
16. Rubber Band：音频拉伸和移调。
17. OBS Studio：录屏和采集。
18. OpenRV：镜头回放和审片。
19. Mediabunny：浏览器内处理视频。
20. FFmpeg：编码、压缩、交付最终成片。

20 个库全装并不现实。项目先要决定镜头里谁先动、停多久、观众该看哪里。renproton 的清单解决“用什么做”，beamnxw 的文章补上“怎么让 agent 按帧做”。

beamnxw 在文章里用 Claude Opus 5.5 跑一套 motion engineering 流程。关键动作是拆参考视频的帧。让模型直接“生成一个酷炫视频”很容易空。先用 ffmpeg 每秒抽 2 张图做概览，再在关键动作附近逐帧检查。模型要输出 REFERENCE.md，记录入场、落地、停留、切镜的源时间戳和帧号，物体边界框，运动方向、时长、缩放、透明度、过冲，以及产品、标题、辅助标签的出现顺序。测出来的值、目测值、创作选择要分开标。

接着写 BRIEF.md：目标、观众、开场文案、收尾文案、画布 1080x1080、30fps、600 帧、资产清单、布局坐标、颜色、动画曲线、声音事件。文章给了一组示例时间轴：frame 195 按下导出，frame 210 出现完成文件，frame 234 结果标签完全可读，frame 420 切收尾。30fps 下，0.6 秒入场是 18 帧，半秒移动 15 帧，8 帧阅读窗口只有 0.27 秒。数字先写秒，再换算成帧，改时间只动一组常量。

Remotion 在这里的角色是把视频变成 React 组件。画面由当前帧号驱动，useCurrentFrame() 决定元素位置、缩放、透明度、产品状态。随机变化用固定 seed，避免同一帧渲染出不同结果。入场用 spring 调阻尼、刚度、过冲。先渲染关键静帧检查文字换行、边距、产品界面可读性，再渲染局部区间看转场。声音也对帧：按下声对齐 frame 195，结果揭示声对齐 frame 210，收尾音乐在 frame 438 落定。文章还给了修正模板：位置、观察到的问题、改什么、什么保持不变。比如光标遮住结果标签，只改按下后的光标路径，保留按下的帧、揭示的帧、卡片几何和文案。

这套流程对开发者的吸引力在于可复现。对非技术读者，帧号就是时间刻度，BRIEF.md 就是拍摄脚本。AI 能写脚本、算帧、生成预览，但“观众来不来得及读完”要靠人看回放。有网友在回复里点出，阅读停留是最被低估的部分，很多发布短片标题闪得比人眼读完快。这个判断比工具列表更接近交付问题。

文章把 20 秒发布短片包装成一个小产品：一个功能、一个脚本、一条 1080x1080 的 MP4、一张封面、一轮修改，示例试点价 150 美元。这个价格只是文章里的测试价，别当市场价。它说明一件事：开源工具把制作成本压到接近 0，买家付钱买的是镜头表、返工和按时交付。

许可证要单独查。有回复说这些库都是 MIT，可以放心商用。这个说法不能一概而论。Remotion 的 README 写明它有特殊许可证，部分商用场景需要公司授权；FFmpeg 的编解码和分发也取决于构建与使用方式。上线前看各自 LICENSE，别把“开源”直接当成“无限制商用”。

收藏这 20 个链接有用。更有用的是挑一个产品动作，写清开始状态、按下、结果、停留，然后渲染一版。工具链是 $0，镜头表和返工不是。

来源：
renproton 原推
beamnxw 文章
beamnxw 引用推文