不是传统前端框架
它不替代 React/Vue，也不主要用来做网站业务逻辑。它的目标是把浏览器当作视频画布。
先说结论
HyperFrames 可以理解为“视频领域的 HTML 渲染管线”。它让开发者或 AI agent 用普通
HTML 描述一个视频画面，用 data-start、data-duration、
data-track-index 这类属性描述时间轴，再由渲染器逐帧捕获网页状态并编码成视频。
也不是普通录屏工具
录屏依赖真实时间流逝；HyperFrames 的关键是把每一帧 seek 到确定状态后再捕获。
特别适合 AI 生成
大模型很擅长写 HTML/CSS/JS，这让 agent 能直接生成、修改、预览和渲染视频。
为什么“HTML 生成视频”有意义？
传统剪辑软件适合人手工操作，但很难被 CI、脚本或 AI agent 稳定驱动。代码生成视频工具虽然可自动化， 但如果创作模型过重，AI 会把大量精力花在项目结构、框架约束和构建流程上。
HyperFrames 的选择是：让视频的源文件尽量接近网页。文字、图片、视频、音频、CSS、Canvas、 WebGL、GSAP、Lottie、Three.js 都已经是浏览器熟悉的东西。它把这些能力收束到一个可渲染的视频时间轴里。
一个 6 秒 composition 的时间轴
Track 0
Track 1
Track 2
背景视频 0-6s
标题 1-5s
音乐 0-6s
index.html
<div data-composition-id="launch" data-width="1920" data-height="1080">
<video
data-start="0"
data-duration="6"
data-track-index="0"
src="intro.mp4"></video>
<h1 class="clip" data-start="1" data-duration="4" data-track-index="1">
Launch day
</h1>
<audio data-start="0" data-duration="6" data-track-index="2" src="music.wav"></audio>
</div>它的核心流程
HyperFrames 最重要的设计不是“能把网页录成视频”，而是“能把网页 seek 到某一帧应该有的状态”。 这让它可以做确定性渲染、回归测试和批量生产。
写 HTML
用 composition、clip 和 data 属性定义画面、时间和轨道。
浏览器预览
通过 CLI 或 Studio 热更新预览，编辑 HTML 就能看到效果。
逐帧 seek
根据 fps 计算每一帧时间，驱动动画和媒体到准确状态。
Chrome 捕获
在 headless Chrome 中捕获当前帧像素，而不是依赖实时播放。
FFmpeg 编码
把帧序列和音频轨混合，输出 MP4、WebM 或 MOV。
关键点：
只要动画、随机数、网络资源和字体环境都可控，同一份输入就能稳定生成同一份视频。
严肃生产环境通常会用 Docker 固定 Chrome、字体和 FFmpeg 版本。
它由哪些部分组成？
| 模块 | 作用 | 一句话理解 |
|---|---|---|
hyperframes / CLI |
初始化、预览、lint、截图、渲染、本地转写等 | 入口工具 |
@hyperframes/core |
类型、HTML 解析、runtime、linter、frame adapter | 规则层 |
@hyperframes/engine |
用 Puppeteer / Chrome / FFmpeg 做页面到视频捕获 | 捕获引擎 |
@hyperframes/producer |
完整渲染流水线：capture、encode、audio mix | 生产管线 |
@hyperframes/studio |
浏览器里的 composition 编辑与预览界面 | 人类界面 |
@hyperframes/player |
可嵌入网页的 <hyperframes-player> 组件 |
播放组件 |
| AWS Lambda / GCP Cloud Run | 云端分布式渲染和批量任务 | 规模化渲染 |
适合什么场景？
01
产品发布视频
把页面、功能截图、动效、旁白和字幕组合成短视频。
02
PR walkthrough
用代码 diff、旁白和字幕自动生成变更讲解视频。
03
数据可视化
做图表 race、地图动画、指标看板和动态报告。
04
网站转视频
抓取网页视觉资产，把页面转成品牌介绍或功能演示。
05
批量模板渲染
用变量生成不同人名、品牌色、图片和文案的视频。
06
AI agent 视频生成
让 agent 从脚本、PDF、CSV、网页或仓库自动生成视频。
和 Remotion 的区别
两者都证明了“浏览器可以作为视频渲染器”。真正的分歧在创作模型： Remotion 把视频写成 React 组件；HyperFrames 把视频写成 HTML 页面。
| 对比项 | HyperFrames | Remotion |
|---|---|---|
| 创作模型 | HTML + CSS + seekable animation | React / TSX components |
| 构建步骤 | 可无构建，index.html 直接预览 |
通常需要 bundler 和 React 项目 |
| AI agent 友好度 | 高，LLM 直接写网页式代码 | 需要理解 Remotion + React 约束 |
| 动画库 | 通过 adapter 把 GSAP、Lottie、Three.js 等 seek 到指定帧 | React 每帧渲染为主，第三方动画时钟需要额外处理 |
| 优势场景 | 网页转视频、AI 生成、模板批量化、可视编辑 | React 团队、类型化组件体系、成熟云渲染生态 |
| 许可证 | Apache-2.0 | Remotion License，商业场景需看当前条款 |
为什么它强调“确定性”？
自动化视频生产最怕“今天渲出来 A，明天同样输入渲出来 B”。HyperFrames 试图把视频生成变成 CI 里可以测试、可以回归、可以批量复现的过程。
会破坏确定性的东西
Date.now()、未设种子的随机数、渲染时网络请求、系统字体差异、真实时间驱动的动画循环，
都可能导致每次输出不同。
它的解决方式
通过 frame clock、adapter seek、readiness gate、固定 fps 和固定画布尺寸，让页面状态由帧号决定。
HyperFrames 生态还包含可复用设计模板、catalog blocks 和 studio/editor 方向的工具。
成熟度与风险
值得关注的优点
项目定位清晰，文档完整，包拆分合理，已经覆盖本地 CLI、Studio、Player、AWS Lambda、GCP Cloud Run、 registry、agent skills 等生产链路。
需要保守评估的地方
项目仍然很新，部分 API 还标注实验状态。真实生产中要重点验证字体一致性、渲染速度、云端成本、 动画 adapter 覆盖度和团队对 HTML 作为视频源文件的接受度。
我的判断：
如果你要做 AI 自动生成视频、网页转视频、批量模板视频，它很值得试；如果你的视频系统已经深度绑定
React 组件和 Remotion 生态，迁移价值需要具体算账。
一句话带走
HyperFrames 是一个用 HTML/CSS/JS 定义视频、用 Chrome 逐帧渲染、用 FFmpeg 输出文件的开源视频生成框架。 它的真正野心，是把“视频创作”变成 AI agent 和自动化系统都能稳定执行的工程流程。