> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperframes-zh.cn/llms.txt
> Use this file to discover all available pages before exploring further.
# 介绍
> 编写 HTML。渲染视频。专为智能体打造。
Hyperframes 是一个开源框架，可将 HTML 转换为确定性的、逐帧渲染的视频 - 因此您可以像构建网页一样定义视频。
## 查看实际效果
这是一个完全定义为 HTML 的视频：
```html theme={null}
```
运行 `npx hyperframes render --output demo.mp4` ，这会生成具有确定性、逐帧捕获的 MP4。每次都是相同的输入，相同的输出。没有时间轴编辑器。无专有格式。只是 HTML。
您可以观看、阅读、运行和重新混合已完成的 HyperFrames 视频 — 产品发布、网站到视频演示、UI 展示和 VFX 实验。
50 多个即用型块和组件 — 社交叠加、着色器过渡、数据可视化和电影效果。使用一个命令安装其中任何一个。
在 5 分钟内从零开始渲染视频。
## 为什么是HyperFrames？
**您已经了解堆栈。** 组合是具有数据属性的 HTML 文件。动画使用 GSAP、Lottie、CSS 或任何可以查找给定帧的运行时。没有自定义 DSL，没有专有的组件系统，也没有 React 要求。如果您可以构建网页，那么您就可以构建视频。
**代理已经可以使用 HTML。** 大多数视频工具需要复杂的 API 或代理无法操作的拖放界面。超框架作品是纯 HTML 文档——法学硕士最擅长生成的格式。默认情况下，CLI 是非交互式的——所有输入都通过标志、纯文本输出、错误快速失败——因此代理可以在没有提示或解析的情况下驱动每个命令。
**设计决定性。** 渲染管道是搜索驱动的，没有挂钟依赖性。 `frame = floor(time * fps)` — 每个帧都是通过 Chrome 的 `beginFrame` API 独立捕获并使用 FFmpeg 进行编码。相同的输入始终产生相同的输出，从而使 CI 测试和批量渲染变得可靠。
Hyperframes 是专为 AI 代理集成而设计的。作品是任何法学硕士都可以生成的纯 HTML。默认情况下，CLI 是非交互式的（由标志驱动并带有纯文本输出），因此代理可以在没有交互式提示的情况下构建、渲染和 lint。为交互式终端 UI 添加 `--human-friendly`。有关详细信息，请参阅 [CLI](/packages/cli)。
## 它是如何运作的
将您的视频定义为 HTML 文档。每个元素获取计时（`data-start`、`data-duration`）和布局（`data-track-index`）的数据属性。通过帧适配器模式添加 GSAP、Lottie、CSS 过渡或任何可搜索运行时的动画。
运行 `npx hyperframes preview` 以在浏览器中打开实时预览。编辑您的 HTML 并立即查看更改 - 无需构建步骤，无需编译。
运行 `npx hyperframes render --output output.mp4` 以生成最终视频。引擎在无头 Chrome 中查找每个帧，使用 `beginFrame` 捕获它，并通过 FFmpeg 传输结果。在本地或 Docker 中运行以获得完全可重现的输出。
## 套餐
类型、HTML 解析、运行时和组合 linter — 其他一切的基础。
可搜索的页面到视频捕获引擎。在无头 Chrome 中加载 HTML 并逐帧捕获。
完整的渲染管道将捕获和 FFmpeg 编码组合到单个 API 调用中。
用于交互式构建和预览时间线的可视化合成编辑器 UI。
用于创建、预览和渲染合成的命令行工具。
## 下一步
从完成的视频和制作启动项目中获取灵感。
在 60 秒内构建并渲染您的第一个视频
了解每个视频背后基于 HTML 的数据模型
使用 GSAP 添加时间线驱动的动画
在本地、Docker 或 CI 管道中渲染