OpenFilm：把写代码的 AI 变成做视频的 AI，我实装跑通了

我装了一个叫 OpenFilm 的东西，让 AI 给我做了个 6 秒的视频，然后亲手把它导出了 MP4。整个过程没碰任何剪辑软件，片子是一个 HTML 文件，每一帧都是一个叫 frame(t) 的函数画出来的。这篇是我实装跑通之后的记录，里面的联系表和视频，都是我真跑出来的，不是官方截图。

项目名片	信息
项目地址	github.com/openfilm/openfilm
主要语言 / License	TypeScript / MIT
Stars（发文时实查）	2596（2026-10-25 实查，会变）
适合谁	已经在用 Claude Code、Codex 这类 coding agent，想让它们顺便做视频的人

它不是文生视频，是把写代码的 AI 变成做视频的 AI

先划清一个容易误会的地方。OpenFilm 不是 Sora 那种「输入一句话、吐出一段视频」的模型。它自己一个模型都没训练，做的事情是让 coding agent（Claude Code、Codex 这些）用网页技术做视频，再配一个叫 Studio 的本地编辑器给你改。

核心设计是三个「一」，README 里直接摆出来：一个 HTML 文件，一个函数，一个真正的编辑器。片子就是 film.html，把动画网页、视频素材、图片和声音用 CSS 排到轨道上；每个镜头是一个网页，用 frame(t) 画出任意时刻的画面；Studio 能改画面里任何元素、在时间轴上裁剪每个 clip。

最关键的约束是那条「唯一铁律」：同一个 t，永远画出同一帧，无论之前画过什么、以什么顺序画。我实测的时候，它把这句话落成了实打实的检查，下面会讲。

实装：一条命令装好，第一次跑下载了个浏览器

环境要求 Node 22.2+ 和 ffmpeg。我本机是 macOS，Node 22.22.2、ffmpeg 7.1.1 都在，直接装：

npx skills add openfilm/openfilm

装的时候遇到个插曲，我本机的 npm 源被配成了已经废弃的淘宝镜像 registry.npm.taobao.org，拉包直接 403。这不是 OpenFilm 的问题，是环境配置。绕开的办法很简单，把源指回官方：

npm_config_registry=https://registry.npmjs.org npx -y openfilm@latest

这条命令一跑，它先打印出一整本手册（MANUAL.md），把 film.html 怎么写、frame(t) 怎么定义、有哪些命令讲得清清楚楚。然后我真正跑 look 命令的时候，它提示「第一次运行，下载浏览器（约 100MB，只这一次）」，下了一个 Playwright 的 headless Chromium 和配套 ffmpeg。之后就再也不用下了。

我做的 6 秒片子：三个镜头，全是 frame(t)

我写了一个最简单的片子来验证它能不能真跑：三个镜头，各 2 秒，一共 6 秒。第一个镜头是标题淡入，第二个是一组按正弦波动的柱状图，第三个是结尾文字淡出。全程没用一个外部视频素材，每一帧都是 frame(t) 里用 t 算出来的。

// 第二个镜头：柱状图，每根柱子高度由 t 驱动，完全确定性
window.film = {
  duration: 2,
  frame(t) {
    [...box.children].forEach((b, i) => {
      const h = 80 + 240 * (0.5 + 0.5 * Math.sin(t * 3 + i * 0.9));
      b.style.height = h + 'px';
    });
  }
};

然后跑 look 检查。这一步是我觉得整个工具最聪明的地方，它做的事是：把片子每一帧都画两遍，而且两遍顺序打乱，然后比对「同一个 t 是不是画出了同样的画面」。如果哪一帧两次画得不一样，说明你的 frame(t) 里藏着不确定性（比如依赖了随机数、依赖了上一次的状态），它会点出来。我的片子画了 12 帧、每帧两遍，结论是「same t, same picture」。

OpenFilm look 命令生成的电影联系表，12 帧展示三个镜头的淡入、柱状图动画和结尾淡出 — look 命令出的联系表，12 帧清楚看到标题淡入、柱状图动画、结尾淡出三个阶段

导出：180 帧 4.3 秒，硬件编码

确认没问题之后跑 render。它起了 3 个浏览器进程并行渲染，180 帧（6 秒 × 30fps），1920×1080，用 macOS 的 h264 硬件编码，只花了 4.3 秒。导出的 MP4 我拿 ffprobe 验了一下，分辨率 1920×1080、帧率 30fps，时长正好 6.0 秒，一点不差。

$ npx -y openfilm@latest render
  rendering 180 frames with 3 browsers…
→ openfilm-test.mp4
  180 frames · 6s at 30 fps · 1920×1080 · 3 workers · h264_videotoolbox · 4.3 s

OpenFilm 导出的视频第 60 帧，青绿色柱状图动画 — 导出视频的第 60 帧，第二个镜头的柱状图，8 根青绿柱子高度不一

完整导出结果放在下面，可以点开看。6 秒、三个镜头，从标题淡入到柱状图到结尾，就是这个片子的全部。

OpenFilm 实装导出的完整 MP4，6 秒 30fps，1920×1080

我顺手做了个课件，讲它自己怎么用

光看一个柱状图 demo 还不够直观。我又用 OpenFilm 做了一个 20 秒的课件视频，主题就是「OpenFilm 怎么用」，把它的五个步骤各做成一个镜头：安装、写 film.html、写 frame(t) 函数、look 检查、render 导出。每个镜头是一张卡片，从远处由小变大飞到眼前，进场那一下用了 cubic-out 缓动，看起来是从远处甩过来的。

卡片进场这个效果，核心就是 frame(t) 里对 t 做的一段缩放加位移。把 scale 从 0.35 拉到 1，再让卡片从下方 120px 处升到原位，配合透明度从 0 到 1，就出来了。三帧对比一下更清楚：

课件视频卡片进场三帧对比：由远到近、由小变大、由暗到明 — 卡片进场的三帧，从左到右是 0.1 秒、0.5 秒、2 秒，清楚看到由远到近的过程

20 秒课件：OpenFilm 五个使用步骤，卡片由远到近进场

这个片子 600 帧、20 秒、30fps，还是 1920×1080，渲染只花了 7 秒出头。五张卡片共用同一套进场逻辑，只是文字和配色不同，这正是 OpenFilm 说的「页面之间共享的东西放到一个文件里」——只不过我图省事，每页写了一份，真要复用可以抽出来。

它把力气花在哪，以及什么时候别用它

读源码和手册，我最认可的一点是它不赌模型能一次画对，而是花力气去检查。除了 look 的「画两遍找差异」，它还能查页面报错、字体加载失败、缺音频文件和文字被裁出画框。导出也做得很全，MP4 支持 4K、运动模糊和透明视频，还能出 GIF、声音分轨、字幕、静帧、幻灯片，甚至能把时间线导出给 Final Cut、Premiere、DaVinci 继续剪。

但它也有明确的边界，我不替你藏。第一，它不生成画面本身，语音、配乐、图片和视频素材都得接你自己的第三方服务（ElevenLabs、OpenAI、Google、fal 这些），用你自己的 key。第二，它要的是「写代码」的 Agent，你得已经在用 Claude Code 或 Codex 这类工具，它才转得起来。第三，像 Sora 那种「输入一句话出电影级画面」的需求，它做不了，也不打算做。

场景	结论
用 coding agent 做动效、片头、数据可视化视频	很合适，这是它的主场
想做可精确控制、能逐帧改的视频	合适，Studio 编辑器和确定性渲染是杀手锏
要一句话出电影级画面	别用，它不做文生视频
没有 coding agent、也不想写代码	别用，它是给写代码的 AI 用的

OpenFilm 的价值不在「生成视频」，而在「让视频变成代码、可检查、可编辑」。它赌的是：与其让模型一次蒙对画面，不如给一个确定性渲染 + 画两遍找差异的检查机制，把出错的帧抓出来。这条路我跑通了，6 秒的片子从写到导出，前后十分钟。