HyperFrames
读懂 HyperFrames：为什么 HTML 页面还需要视频时钟
了解 HyperFrames 如何把 HTML 和可定位动画变成 MP4、可复现渲染需要哪些条件，以及适合采用这种方式的视频任务。
你将学会
- 渲染器需要明确的帧时间，不只是能播放的动画。
- 合成排期与动画控制是相连但不同的约定。
- 素材、字体、数据和设置都影响复现。
开始前需要
- 具备基础 HTML、CSS 与 JavaScript 知识
- 本地练习需要 Node.js 22+ 和 FFmpeg
解释本章对应边界，使用清单评估可重复的视频工作流。
先看结论
- 渲染器需要明确的帧时间，不只是能播放的动画。
- 合成排期与动画控制是相连但不同的约定。
- 素材、字体、数据和设置都影响复现。
从能够播放的页面，到可以指定的帧
HyperFrames 是使用 HTML、CSS、媒体和可定位动画创作视频的开源框架。README 描述了在无头 Chrome 中把合成定位到指定时间，再用 FFmpeg 编码捕获帧的流程。关键不是简单录制浏览器窗口，而是渲染器能够明确请求某一帧。
按现实时间运行的动画会随着等待不断前进；可定位的合成则根据显式时间值决定画面状态。跳转、回看一帧或分配渲染工作时，这一区别尤其重要。如果动画只有从头播放才正确，就还不是可靠的按帧定位合成。
HTML 提供结构，时间约定让它成为视频
文档使用 data 属性标识合成、尺寸、片段开始时间、持续时间和轨道位置。GSAP 示例创建暂停的时间线，并按合成 ID 注册。这两部分把熟悉的网页创作方式，与渲染器能够控制的时间线连接起来。
项目包含 CLI、核心运行时、捕获引擎、完整生产流程、素材目录、编辑器、播放器和分布式渲染包。评估本地合成不必同时采用编辑器或云服务。创作辅助、预览与最终渲染应分开理解，因为它们的依赖和失败方式不同。
在可重复的视觉任务中发挥作用
HTML 优先的方式适合模板化产品介绍、图表讲解、字幕和可重复动效。团队可以审查合成源码并复用排版规则。如果主要工作是在成熟剪辑软件里精细剪切长素材，那么这种源文件驱动方式未必更合适。
README 把确定性视频作为项目目标，但实际复现还依赖固定素材、字体、库版本、数据和渲染设置。远程图片变化或随机初始化场景，都可能让相同 HTML 产生不同输出。应通过样本验证重复性，而不是认为生成了 MP4 就天然可复现。
实施步骤
- 1
选择短小、可重复的视觉任务。
- 2
确定尺寸、时长和已知画面状态。
- 3
第一次评估时固定依赖与素材。
可复制示例
<div data-composition-id="intro" data-start="0"
data-width="1920" data-height="1080"
style="width:1920px;height:1080px;background:#101827;color:white">
<h1 class="clip" data-start="0" data-duration="6"
data-track-index="0">一个六秒标题</h1>
</div>常见问题
它只是录屏工具吗？
文档描述的是先把合成定位到帧时间，再进行捕获，不是录制自由运行页面碰巧显示的内容。
相同 HTML 就能保证相同视频吗？
不能只看 HTML。素材、字体、脚本、数据、动画状态和渲染设置也会影响结果。
资料来源
- 固定版本 README来源核查 2026-09-07
- GSAP 适配器来源核查 2026-09-07
- 定位事件派发器来源核查 2026-09-07
- Three.js 适配器来源核查 2026-09-07
- GSAP 测试来源核查 2026-09-07
- 派发器测试来源核查 2026-09-07