OpenFilm：让 Coding Agent 顺手出片，还给你一个手改、Agent 记得住的编辑器

一、它是啥：把 Coding Agent 变成视频 Agent，还给你一个能改一切的编辑器

openfilm/openfilm（2026-10-18 实查 ★936 / 99 forks / MIT / TypeScript / 官网 openfilm.dev）一句话定位是「开源的 AI 视频 Agent：让任意 coding agent 做视频，再给你一个编辑器，改它做的任何东西」。

它有个很抓人的节奏感——仓库 10-04 才建，10-18（当天）还在提交，两周时间爬到 936 星，还带 10 类影片的官方 Skill（openfilm/skills，中英双语）。很新，但方向很清晰。

它的核心是三句 slogan「One HTML file, one function, one real editor」，拆开讲：

• 一个 HTML 文件：一部片就是一个 film.html，把网页、素材、图片、声音在「轨道」上剪在一起，用 CSS 摆位。不学新东西——你的 agent 本来就会 web。
• 一个函数：每一镜是一个网页，用一个 frame(t) 函数画出「第 t 秒」的样子，里面想用浏览器能画的一切：three.js、WebGL、canvas、SVG、CSS、GSAP、video……不依赖框架（README 特意点名「不像 Remotion 或 HyperFrames 那种框架，一个函数就够」）。
• 一个真编辑器：本地浏览器里的 Studio，能挪、缩放、旋转画面里任何元素，改文字颜色样式；在时间线上裁剪、摆位、改音量速度。你手改的，agent 下次看得到、会保留。

它跟站内 Remotion 教程（article-156）是两条互补的路：Remotion 是「React 组件 + useCurrentFrame()」的框架流，OpenFilm 是「无框架、每镜一个 HTML、一个 frame(t) 纯函数」的极简流。两者共同点是确定性——每一帧都是代码算出来的，不是抽卡；区别在 OpenFilm 把「要学的框架」砍到只剩一个函数契约，并多给了一个你手改、agent 会记住的编辑器。

二、一条片在磁盘上长什么样：film.html + 每镜一个 HTML

官方 examples 仓（★10）里有个 one-prompt 实例，一句话提示词出的 88 秒歌词视频。它的 film.html 我拉下来读了，就这么短：

<section>
  <iframe id="intro"       src="intro.html"></iframe>
  <iframe id="verse"       src="verse.html" at="7.479"></iframe>
  <iframe id="pre-chorus"  src="pre-chorus.html" at="26.168"></iframe>
  <iframe id="chorus"      src="chorus.html" at="30.594"></iframe>
  <iframe id="verse-2"     src="verse-2.html" at="46.332"></iframe>
  <iframe id="drop"        src="drop.html" at="60.594"></iframe>
  <iframe id="final-chorus" src="final-chorus.html" at="68.463"></iframe>
  <iframe id="outro"      src="outro.html" at="85.184"></iframe>
</section>
<section>
  <audio id="song" src="assets/one-prompt.mp3"></audio>
</section>

结构一清二楚：一个 <section> 是一条轨道，一个元素（iframe/video/img/audio）是一个 clip。at="7.479" 是这个镜头在整片里的起点（秒），#t=in,out 是素材片段里取哪一段。第一轨在最上面，所以标题永远压在它盖住的素材之上，背景放最后。一镜一个 HTML（intro/verse/drop…），每个 HTML 再指向 src/section.js 共享的渲染逻辑。

看 section.js 里那个 frame(t) 的真实实现，就能理解「纯函数帧」到底是什么意思：

// 一帧一镜：canvas + WebGL 渲染器 + 引擎放这个镜子的「plates」
const draw = (t) => {
  engine.lastT = -1; // 每帧都当作「seek 到这个点」重画，帧与帧之间不携带任何状态
  engine.render(Math.min(Math.max(t, start), end - 1e-3), 1/60, true, 1);
};
window.film = {
  duration: Math.round((end - start) * 1000) / 1000,
  ready: engine.init().then(() => { /* 预编译每个 plate 起点的 shader */ }),
  frame(t) { draw(start + t); },   // 就这一行是契约
};

关键就那行注释：「every frame is drawn as if seeked to: nothing carries over from the frame before」——同一秒 t 永远画出同一幅画面，跟之前画过什么无关。因为渲染时帧是乱序、并行、夹着运动模糊帧取的（运动模糊是宿主 openfilm render --blur 算的），只有「无状态纯函数」才能保证任何机器、任何尺寸出片一致。Python、Blender、甚至视频模型生成的东西，都作为 video / 图片进来——契约只认「一个 t 画出一帧」。

三、它把力气花在模型不擅长的地方：出片后校验

「AI 出片」最大的坑是出完才发现崩了。OpenFilm 的应对很实在：openfilm look 会把每一帧画两遍、用两种打乱的顺序，点名任何发生变化的帧，顺带报页面错误、加载失败的字体、缺的声音文件、被画框裁掉的文字。README 原话是「OpenFilm spends its effort where models fail: checking the film」——模型负责把画面做出来，它负责把「哪帧不对、为什么」查出来。这条跟 156 篇 Remotion 里「agent 出片后你要不要返工」的判断是一回事，但 OpenFilm 把它做成了命令。

四、上手：一条命令装，一条提示词出片

依赖是 Node 22.2+、ffmpeg、git；首跑会下一个 ~100MB 的 headless Chromium（Windows 上就是我本机实测的环境，见第五节）。装法就一条：

npx skills add openfilm/openfilm   # 给你的 coding agent 装 OpenFilm 技能
npx -y openfilm@latest              # 没有技能时，让 agent 跑这句并照打印的 manual 做

然后对 agent 说人话就行：「给我做个 20 秒的 CLI 发布视频，带音乐」。它写出的片会开在 Studio 里看着成形，你手改或继续让它改。桌面版（openfilm.dev 或 Releases 下载 macOS/Windows）是「Studio + 旁边一个聊天框」，内置 ffmpeg 和 headless 浏览器，不用再装别的。做片/编辑/渲染不用账号；只有配音、音乐、图、视频生成要接你自己的 key（ElevenLabs、OpenAI、Google、fal），在 Studio 的 Settings → Providers 里填。

官方 skills 仓里有 10 类影片的「brief」（每种片子该怎么写、怎么问 agent）：collage（拼贴）/ keynote（演示）/ long-to-short（长转短）/ lyric-video（歌词视频）/ motion-graphics（动态图形）/ presenter-pip（讲解者画中画）/ replicate（复刻已有片子）/ screen-demo（界面演示）/ vintage-film（复古胶片）/ whiteboard（白板）。这跟 157 篇 Motion Prompt 的思路相通——都是在补「需求/风格怎么说清楚」那层，只是 OpenFilm 把它做成了「按影片类型分的说明书」。

渲染命令也极简，agent 会自己跑，你也能跑：

openfilm render [a-b]        # 出 MP4；--4k、--blur(运动模糊)、--alpha(.webm/.mov 透明底)

透明底这条正好接上 156 篇 Remotion 那节——两家的「透明出 WebM/ProRes」结论一致，因为都是没有 alpha 通道的 MP4 做不到的物理约束。

五、实跑：Windows 上真的跑起来了

我没有只读 README，本机（Windows + Node v22.22.2）直接跑了 npx -y openfilm@latest，它成功打印了给 agent 看的完整 manual——也就是它把「agent 该知道的一切」直接吐给你看。开头就是：

# OpenFilm
You make films. A film is a web page, film.html, that cuts pages, footage,
pictures and sound together. A page is a web page that sets window.film
and draws any moment t it is asked for.

## film.html
  <meta name="viewport" content="width=1920, height=1080">
  <section>   <!-- 一条轨道 -->
    <iframe src="title.html"></iframe>
    <img src="assets/logo.png#t=0,3" at="6" style="left:1640px; top:60px; width:200px">
  </section>

manual 里两条实操细节值得记：「改 film.html 前把它重新读一遍，只改你意思到的部分」（因为你和 agent 都在改它）；「被 person 在 Studio 锁定的轨，什么都不许动；overrides 里是人的改动，原样保留」。这正是「人和 agent 同时编辑同一份文件」的协作约定——它没回避这个，而是写进规则里。

我没往下跑完整渲染（那要拉 100MB Chromium + ffmpeg，本机这步属于重资源）；本文实测到「manual 打印成功、命令体系真实」为止。要看真出片，照 156 篇的做法在 Linux/CI 上跑更稳。

六、横向：四条「程序化出片」路线，各管一段

选型的指征很清楚：不想学框架、要快上手、还要一个能手改的编辑器 → OpenFilm；要把动画做成可复用组件、进 CI 批量出 → Remotion；给真实产品做营销宣传片 → video-shotcraft；要一整套素材到成片的流水线 → OpenMontage。OpenFilm 的独特卖点是「把 agent 出片的最后一公里（人工微调 + 校验）做进了工具」，其余三家更偏「生成/编排」。

七、坑与权衡

• 很新：10-04 建、99 forks、8 open issues——两周量级的项目，API 还会动。拿来试方向没问题，拿来做要交付、要长期维护的生产线，先观望它稳不稳。
• 每镜一个 HTML + 多 iframe：一条片是一个文件夹，文件比 Remotion 的「一个项目一堆组件」更散；好处是每镜独立、agent 好改，坏处是跨镜共享状态要靠公共 src/（实例里 section.js 抽出来共享）。
• 渲染要 headless Chromium + ffmpeg：首次 100MB 下载，纯「写」不耗，「渲」才耗机器；桌面版帮你把这俩内置了。
• 确定性是双刃剑：纯函数帧保证可复现，但意味着「随机的手感」你得自己写进 frame(t)（用种子化的随机），不能靠它自己发挥——这点跟 156 篇 Remotion 完全一致。
• 生成素材另接 key：配音/音乐/图/视频走你自己的服务（ElevenLabs/OpenAI/fal 等），OpenFilm 本体只管「代码出片 + 编辑 + 渲染 + 校验」，不包素材生成。

八、我的判断

• 什么时候用它：你想让手头的 coding agent「顺手」把动画/歌词视频/产品 demo 做出来，又不想为一支片学一整套框架；还想要「agent 出一版 → 我在编辑器里拧两下 → 它记住我的改法」这种人机协作。这正好是它 slogan 三个 one 的落点。
• 跟 156/157 怎么叠：157 Motion Prompt 教你「动作叫什么」（需求层），156 Remotion / 本篇 OpenFilm 是「怎么把画面确定性地画出来」（实现层），video-shotcraft 是「给真产品做片」（场景层）。需求 → 实现 → 场景，三层分开挑。
• 一句话：OpenFilm 赌的是「出片难的从来不是画，是画完之后你改不动、查不出哪帧错了」——它把编辑器和校验这两件被生成模型忽略的事做进工具里，这是它 936 星里我真正看好的部分。

数据红线说明：openfilm/openfilm ★936 / 99 forks / MIT / TypeScript / 官网 openfilm.dev，created 2026-10-04、pushed 2026-10-18（当天）均为 2026-10-18 GitHub API 实查值；openfilm/skills 10 类 genre brief、examples 仓结构、one-prompt 的 film.html 与 section.js 源码、openfilm look/render 命令与「纯函数帧/双画校验」机制均引自仓库当日实读；本机实测 Node v22.22.2 + npx openfilm@latest 打印 manual 成功（截至「命令体系真实」，未跑完整渲染）；横向星数 Remotion ★64,847 / video-shotcraft ★12,329 / OpenMontage ★69,288 沿用站内 article-156/110/47 口径（OpenMontage 为 GitHub 搜索当日值）。