用代码生成视频已经不是新鲜事了，但有两个 GitHub 项目走了一条不同的路——用写 HTML 的方式来做视频。不需要 React，不需要复杂的构建流程，一个 HTML 文件就是一个视频。

1. HyperFrames：HeyGen 开源的视频渲染框架

HyperFrames 是 HeyGen 在今年 4 月开源的视频渲染框架，目前已有 2.5 万+ Star。HeyGen 团队你可能听说过——前两年很火的马斯克说中文、郭德纲说英文的改口型视频，就是它们产品生成的。

GitHub 仓库：github.com/heygen-com/hyperframes

核心思路很简单：一个 HTML 文件就是一个视频。你在 HTML 里用 data 属性定义每个元素的出现时间、持续时长和所在轨道，然后用 GSAP 或 CSS 动画控制运动。HyperFrames 的渲染引擎在无头 Chrome 里逐帧录制，最后用 FFmpeg 合成 MP4。

整个过程完全确定性，同一个 HTML 永远产出同一个视频，没有随机性。这点对自动化场景特别重要，不怕结果飘。

原生为 AI Agent 设计

这是它和其他视频框架最大的区别。HyperFrames 内置了 15 个 Skill，装上之后你可以直接跟 Agent 说"帮我使用 hyperframes skill，做一个公众号介绍视频"，Agent 就会自动写 HTML、加动画、渲染成片。

不需要 React，不需要打包

Remotion 也是做代码化视频的，但它要求你用 React 写组件，还得配打包工具。HyperFrames 选了纯 HTML 路线，一个 index.html 文件浏览器直接打开就能预览，Agent 写起来也更自然——毕竟 HTML 是所有 Agent 都会写的东西。

动画引擎随便选

GSAP、CSS Animations、Lottie、Three.js、Anime.js、Web Animations API 都能用，通过适配器模式接入。你熟悉哪个就用哪个，不用新学一套。

内置 Catalog 组件库

转场效果、数据图表、字幕叠层、社交平台样式这些常用元素都有现成组件，一行命令加到项目里。还有 Shader 转场，WebGL 级别的视觉效果。

2. html-video：HTML 版的剪映

Open Design 团队最近开源了 html-video 项目。Open Design 就是做 Claude Design 开源平替的那个团队，那个项目在 GitHub 上已有 6 万+ Star。html-video 是同一个团队的作品，定位是"HTML 版的剪映"。

GitHub 仓库：github.com/nexu-io/html-video

和 HyperFrames 不一样的地方在于，HyperFrames 是渲染引擎，你从零开始写 HTML。html-video 在 HyperFrames 之上又包了一层，重点做了三件事：

21 套精心设计的模板

涵盖数据可视化、产品宣传、动态排版、电影片头、Logo 片尾各种场景。每套模板都有 license 清理，可以直接商用，不用担心版权问题。

链接转视频

直接丢一篇文章链接或者 GitHub 仓库地址，html-video 会自动抓取内容，用 AI 分析文章结构，拆成多个场景，套上模板渲染成视频。支持微信公众号文章，对国内用户很友好。

多 Agent 后端

支持 Open Design、Claude Code、Codex、Hermes 等 Agent，在 Studio 界面里可以随时切换。啥都没装的话，配个 Anthropic API Key 也能直接用。

它还有一个本地 Studio 界面，浏览器打开就能选模板、编辑每帧文字、加背景音乐和配音，最后导出 MP4。整个流程在本地跑，不用上传到云端。

启动方式：

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio

打开 http://127.0.0.1:3071 就能用了。

html-video 的架构设计挺有意思，它把渲染引擎做成可插拔的适配器。现在默认用 HyperFrames 引擎，但 Remotion、Motion Canvas 这些引擎也在路线图上。也就是说以后换引擎不用重写模板，底层引擎换了，上面的模板和 Agent 工作流都能直接复用。

苏米观察

这两个项目代表了 AI 视频生成的两条路线：HyperFrames 提供底层渲染引擎和 Agent Skill，让 AI 自由创作；html-video 在引擎之上封装模板和工作流，降低使用门槛。

核心思路是一致的——让 AI 写它最擅长的 HTML，然后渲染成视频。不需要学新的框架，不需要配复杂的工具链。HTML 是所有 Agent 都会写的东西，这是最低摩擦力的切入点。