hyperframes
活着就要学习，学习不是为了活着。——培根
HyperFrames：当 HTML 开始讲故事，视频制作也有了新的表达方式
视频创作常常被想象成一条漫长的生产线。
画面、字幕、转场、音乐、时间轴、导出设置、格式编码，每个环节都像一扇需要单独推开的门。对于希望自动化制作内容的人来说，真正棘手的地方并不只是完成一支视频，而是如何把创意、代码、媒体资源与稳定的渲染结果放进同一条可重复执行的流程。
HyperFrames 希望把这件事变得更直接。
它是一套开源的视频渲染框架，核心思路非常清晰：编写 HTML，渲染视频，并且为智能体而构建。
项目地址：https://github.com/heygen-com/hyperframes
在 HyperFrames 的世界里，HTML、CSS、媒体资源与可定位动画不只是网页中的元素，它们能够共同组成确定性的 MP4 视频。开发者可以通过命令行在本地使用它，也可以让 AI 编程智能体借助技能体系参与视频制作，还可以将其作为代码库的一部分接入自动化工作流。
视频不再只能从传统时间轴中诞生，也可以从一个 index.html 开始。
视频，为什么不能像网页一样编写
网页开发者对 HTML 并不陌生。
标题、图片、按钮、布局、字体、颜色、媒体内容，许多视觉表达早已可以通过 HTML 与 CSS 描述。HyperFrames 将这种熟悉的创作方式向前推进了一步：不仅描述一个页面长什么样，也描述它在什么时间出现、停留多久、位于哪条轨道，并且如何随着时间产生动画。
于是，视频的结构可以落在一份普通的 HTML 文件里。
画面中的视频素材可以作为片段出现。
标题可以在指定时刻淡入。
背景音乐可以伴随画面在设定的时间范围内播放。
动画可以由 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时驱动。
HyperFrames 不要求使用 React，也不要求依赖专有时间轴格式。它让 HTML 成为视频组合的原生载体，让创作内容更接近浏览器本身能够理解的结构。
确定性，是自动化视频的重要底座
对自动化视频生产来说，最让人不安的事情之一，是同一份输入在不同时间得到不同结果。
HyperFrames 强调确定性渲染。相同输入会得到相同帧和相同输出，这使它能够服务于持续集成、回归测试与自动化渲染场景。
它的渲染流程会在无头 Chrome 中定位每一帧，再由 FFmpeg 编码输出视频。HTML 中的内容、时间信息、媒体轨道与可定位动画共同构成画面，而渲染器则负责将这一切逐帧捕获并编织为 MP4。
这让视频不只是一次手动导出的成品，也可以成为可重复构建的输出。
当一个视频由代码、资源和明确的时间规则组成时，它就可以被检查、预览、调整、重新渲染。创作过程不必依赖难以复述的手工操作，画面也不必只能存在于某个特定编辑软件的工程文件中。
一份 HTML，就是一段可渲染的时间叙事
HyperFrames 通过 data-* 属性表达时间与轨道信息。
下面这段示例展示了一种视频组合方式：一段视频从起始时刻开始播放，标题在第一秒出现，音频作为另一条轨道存在，动画时间线则由 GSAP 控制。
1 | <div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080"> |
在这里，视频不再是一块封闭的黑盒。
媒体资源有自己的位置。
标题有自己的出现时机。
音频有自己的轨道和音量。
动画也有可以精确回到任意时刻的时间线。
HTML 像一份舞台设计图，时间属性像演员的出场安排，渲染器则把静态的说明转化为连续的画面。
可定位动画，让每一帧都能回到正确的位置
传统网页动画通常围绕自然时间流逝展开。页面加载之后，动画开始播放，随后不断向前推进。
但视频渲染需要另一种能力。
渲染器需要跳转到指定帧，得到该时刻本应出现的准确画面。它不能只依赖动画从零开始播放后的自然状态，因为视频的每一帧都必须能够被可靠定位。
HyperFrames 围绕这一需求组织动画能力。
它支持 GSAP 时间线、CSS 关键帧、Anime.js、WAAPI、FLIP、路径动画、遮罩、SVG 形变与绘制、三维深度等可定位动画创作方式，也可以通过适配器引入自己的动画运行时。
动画不只是从头播放的装饰，而成为能够被帧准确寻址的画面语言。
标题淡入时的节奏、图表增长的过程、镜头转换时的层次、元素从画面边缘进入的轨迹，都可以在时间坐标中找到自己的位置。
为智能体准备的视频生产流程
HyperFrames 的另一条主线，是让 AI 编程智能体参与视频创作。
项目提供了 20 项可按需加载的技能。对于任何创建、编辑、动画或渲染视频、动画与动态图形的请求，/hyperframes 是首个需要阅读的路由技能。它承担能力地图的角色，会根据创作需求选择合适的工作流。
安装技能时，可以使用：
1 | npx skills add heygen-com/hyperframes |
核心技能组足以覆盖基础使用路径。路由技能会在需要时安装对应的创作工作流，让安装保持轻量。
对于希望获取当前主分支技能内容的场景，也可以使用：
1 | npx hyperframes skills update |
这些技能向智能体传递的，并不是单一命令，而是一套视频制作循环。
先规划视频。
再编写有效的 HTML。
接着接入可定位动画与媒体资源。
然后进行检查、预览和渲染。
智能体不只是生成一段页面代码，而是能够在视频生产流程中理解创作目标、组织画面、处理媒体、检查结构并产出结果。
不同创作需求，走向不同工作流
视频创作的需求并不总是相同。
有时需要围绕产品网站制作上线宣传内容，有时需要解释一个概念，有时需要把代码变更变成更容易观看的讲解，有时则需要为已有视频添加字幕、动态图形或信息叠层。
HyperFrames 为这些不同方向准备了创作工作流。
| 技能 | 适用方向 |
|---|---|
/product-launch-video |
产品网站、产品发布、推广内容、站点导览与社交短片 |
/faceless-explainer |
围绕任意文本解释主题或概念的内容 |
/pr-to-video |
将 GitHub 拉取请求转化为更新说明、功能展示、修复说明或重构解读 |
/embedded-captions |
为已有真人出镜视频添加字幕或字幕嵌入效果 |
/talking-head-recut |
为访谈、播客与真人出镜素材加入设计化图形叠层 |
/motion-graphics |
创建较短的无旁白设计型动态图形 |
/music-to-video |
围绕音频或音乐制作节拍同步视频 |
/slideshow |
制作演示文稿、路演材料与可交互幻灯片 |
/general-video |
处理更长、多场景或自由组合的视频内容 |
/remotion-to-hyperframes |
将已有 Remotion 组合源代码迁移为 HyperFrames HTML |
这些工作流像视频制作中的不同入口。
有的从产品出发，有的从文本出发，有的从音频出发，有的从已有视频出发，也有的从代码变更出发。无论入口是什么，最终都会回到同一套核心能力：HTML 组合、媒体资源、可定位动画、预览、检查与渲染。
从产品发布到数据可视化，视频可以覆盖哪些内容
HyperFrames 列出的创作方向非常广泛。
它可以用于产品发布视频和功能公告，也能够用于包含动画代码差异、旁白与字幕的拉取请求讲解视频。数据可视化、图表竞赛、地图动画、带动态字幕与音乐的社交视频、文档转视频、PDF 转视频、站点导览说明，以及自动化内容流水线中的可复用动态图形，都是它覆盖的内容形式。
这些内容看起来彼此不同，却都可以在 HTML 原生视频创作方式中找到位置。
一张图表不必只是静态地停在屏幕上，它可以按时间展开。
一段代码更新不必只存在于变更记录中，它可以成为带有节奏的视觉讲述。
一个产品页面不必只以截图形式传播，它可以被组织为带有镜头、标题、叠层与音乐的展示内容。
一份文档也不必只等待被阅读，它还可以被重新编排为可观看的说明视频。
frame.md：把设计系统翻译给镜头
网页中的设计系统，通常服务于屏幕、组件与交互。
但视频有自己的空间。
镜头如何安排层级，文字如何在画面中呼吸，颜色如何随着时间建立情绪，节奏如何让内容获得推进感，这些都不是简单把网页设计搬进视频就能解决的问题。
HyperFrames 提出了 frame.md 的概念。
它被定义为一层面向视频的设计翻译机制。它从网页上下文中的设计规范出发，转向镜头与画面，使设计系统能够被用于视频创作。
frame.md 的输出是 DESIGN.md 的超集。设计原子仍然保留，组合方式仍然开放，而具体数值则来自脚本。
这让设计规范不再只属于静态页面，也能够成为视频画面构成的一部分。色彩、字体、版式、叙事、配乐规划、音频响应视觉与画面组合模式，都可以被纳入更适合镜头表达的设计语言中。
命令行，把视频创作变成可运行的项目
如果不通过智能体，也可以直接使用 HyperFrames CLI 创建项目。
1 | npx hyperframes init my-video |
其中，preview 用于在浏览器中预览，并支持实时刷新。render 则将项目渲染为 MP4 视频。
运行 HyperFrames 需要 Node.js 22 或更高版本，以及 FFmpeg。
CLI 不只是用于最终导出。它还覆盖项目初始化、检查、预览、渲染、发布与诊断等开发循环。对于视频项目来说，这让制作过程拥有了更接近软件开发的节奏。
建立项目。
编辑 HTML。
查看预览。
检查问题。
调整动画和媒体。
重新渲染。
视频创作可以因此成为一个持续迭代的过程。
媒体、音频与组件，不必从零开始
HyperFrames 提供了可复用的目录能力。
转场、叠层、字幕、图表、地图与效果等内容可以作为现成区块或组件安装到组合中。例如：
1 | npx hyperframes add flash-through-white |
这三条命令分别对应着着色器转场、社交叠层与动态图表。
对于创作者和智能体来说，目录的意义在于不必每次都从空白画布开始。常见的视觉模块可以被接入已有组合，再根据内容需求继续调整。
项目中的媒体处理能力也覆盖背景音乐、音效、图片、图标、标志、声音、色彩分级与 LUT 等需求。媒体资源可以被整理为冻结在本地的文件，或者作为能够直接放入组合的内容块与记录使用。
音频部分则不仅是简单播放。HyperFrames 提供音频混合能力，可对已经放入组合的音频进行处理，包括为旁白腾出音乐频段空间、进行静态或动态压低，以及完成电平匹配。
画面与声音不再是各自独立的层，而可以在同一个组合里共同编排。
一个不断延展的视频创作栈
HyperFrames 不只是一条渲染命令，也不只是一组 HTML 规则。
它由开放源代码渲染引擎，以及围绕 HTML 原生视频创作逐渐展开的工具集合构成。
| 组成部分 | 状态 | 作用 |
|---|---|---|
| CLI | 已提供 | 创建项目、预览、检查、查看与本地渲染视频项目 |
| Core、Engine、Producer | 已提供 | 解析组合、驱动无头 Chrome、编码视频与混合音频 |
| Catalog | 已提供 | 提供转场、叠层、字幕、图表、地图与效果等可复用内容 |
| Agent skills | 已提供 | 向编程智能体传递视频生产模式 |
| Studio | 已提供并持续演进 | 在浏览器中预览与编辑组合 |
| AWS Lambda rendering | 已提供 | 部署分布式渲染栈，并从本机或持续集成环境发起渲染 |
| frame.md | 已提供 | 将设计系统转化为可用于视频组合的设计规范 |
在包层面，HyperFrames 还将不同责任拆分为多个模块。
| 包 | 职责 |
|---|---|
hyperframes |
创建、预览、检查与渲染组合的命令行工具 |
@hyperframes/core |
类型、解析器、生成器、检查器、运行时与帧适配器 |
@hyperframes/engine |
基于 Puppeteer 与 FFmpeg 的可定位页面转视频捕获引擎 |
@hyperframes/producer |
捕获、编码与音频混合构成的完整渲染流程 |
@hyperframes/studio |
浏览器中的组合编辑界面 |
@hyperframes/player |
可嵌入的 <hyperframes-player> Web 组件 |
@hyperframes/shader-transitions |
用于组合的 WebGL 着色器转场 |
@hyperframes/aws-lambda |
面向分布式渲染的 AWS Lambda SDK 与部署能力 |
这样的拆分让视频创作不是只能通过单一界面完成的任务，而是可以进入本地开发、自动化流水线、浏览器编辑、嵌入式播放与分布式渲染等不同场景。
没有构建步骤，HTML 可以直接开始播放
HyperFrames 的一个特征，是不要求额外构建步骤。
一个 index.html 组合可以直接播放，也可以直接在浏览器中预览。对于习惯网页开发的人来说，这种方式很自然：先写内容，再打开查看，再继续修改。
它降低了从想法到画面的距离。
不需要先建立复杂工程，再等待打包完成，才知道画面是否符合预期。HTML 文件可以先成为可见内容，随后再进入更完整的渲染流程。
这种直接性，也很适合与智能体协作。
智能体已经擅长生成和修改 HTML。对它来说，交接一份普通 HTML 文件，比处理高度封装的专用格式更直接。对人来说，阅读与修改组合内容也更容易贴近网页开发的经验。
开源，让视频渲染能力保持可见
HyperFrames 采用 Apache 2.0 许可证。
项目强调没有按次渲染费用，也没有商业使用门槛。源代码与渲染过程可以被查看，HTML 组合可以被修改，动画与媒体能力可以根据实际需求继续扩展。
视频创作往往包含许多不透明的环节。
某个效果为何出现，某段动画为何无法复现，某个导出结果为何发生变化，某项渲染能力又被怎样限制。HyperFrames 选择用开放源代码、HTML 原生组合、明确时间属性与可定位渲染流程，让更多环节保持可观察状态。
它让视频不只是一段最终文件，也是一份可以阅读、调整、测试与重新生成的创作结构。
当代码拥有镜头感
HyperFrames 描绘的是一种很有意思的视频创作方式。
HTML 不再只服务于网页。
CSS 不再只负责页面样式。
动画库不再只负责浏览器里的交互动效。
FFmpeg 不再只是最后导出时隐藏在后台的工具。
这些熟悉的技术元素被重新组织起来，开始共同服务于镜头、节奏、叙事、音频与画面。
对于开发者来说，视频可以像项目一样维护。
对于智能体来说，视频可以像代码任务一样被规划、编写、检查与渲染。
对于自动化流程来说，视频可以成为稳定、可重复、可验证的输出。
当一份 HTML 能够承载画面、时间、媒体和动画时，视频创作便不再只是时间轴上的拖拽与剪切。它开始拥有代码的清晰结构，也拥有镜头语言应有的流动与生命力。