项目简介
HyperFrames 是一个将 HTML、CSS、媒体素材和可定位到指定时间的动画渲染为 MP4 视频的开源框架。仓库为 heygen-com/hyperframes，主要语言为 TypeScript，许可证标注为 Apache-2.0。
项目提供命令行工具、渲染引擎、浏览器编辑界面和 AI 编程助手技能。视频内容以 HTML 文件描述，不要求使用 React。README 介绍了本地命令行制作，以及由 AI 编程助手协助制作的方式。
项目使用场景
适合制作产品发布视频、功能介绍、带代码差异动画的开发讲解、动态图表、地图动画，以及带字幕、叠加元素和音乐的社交媒体视频。
也可用于文档转视频、PDF 转视频、网站导览，以及自动化内容流程中重复使用的动态图形。需要通过代码定义画面、时间和素材，并重复渲染视频时，可以考虑使用该框架。
项目作用与解决的问题
HyperFrames 通过 HTML 数据属性描述素材的开始时间、持续时间和轨道，将网页内容组织为视频时间线。动画可采用 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或自定义帧适配器，但需要支持定位到指定时间。
渲染引擎使用无界面 Chrome 按帧捕获画面，再由 FFmpeg 编码并处理音频。README 将相同输入产生一致输出作为其设计特性，适用于重复渲染和自动化流程。
组件目录提供转场、标题、字幕、图表、地图和特效等可编辑组件；配套技能帮助 AI 编程助手完成规划、HTML 编写、动画设置、素材添加、检查、预览和渲染。
项目使用方法
1. 完成下节的环境准备和项目初始化后，在终端执行 `cd my-video`，进入创建的视频项目目录。
2. 按 README 的内容结构，用 HTML 定义画面，通过数据属性设置开始时间、持续时间和轨道，并添加媒体素材及可定位到指定时间的动画。具体文件结构和属性规则应查阅原始仓库中的快速入门与文档。
3. 如需 AI 编程助手协助，在视频项目目录执行 `npx hyperframes skills update` 安装核心技能，然后向支持技能的助手提出视频要求。例如：使用 `/hyperframes` 制作一个 10 秒产品介绍，包含淡入标题、背景视频和轻柔背景音乐。
4. 如需现成组件，可执行 `npx hyperframes add data-chart` 添加动态图表。README 还提供了 `npx hyperframes add flash-through-white` 转场组件和 `npx hyperframes add instagram-follow` 社交叠加组件。
5. 执行 `npx hyperframes preview`，在浏览器中预览，并结合实时刷新调整内容。
6. 内容确认后，执行 `npx hyperframes render`，将项目渲染为 MP4。README 未在所给快速入门中说明输出文件的具体位置，应查阅原始仓库文档。
项目安装方法
1. 准备 Node.js 22 或更高版本及 FFmpeg。这是 README 明确列出的命令行使用要求；所给资料未提供它们的完整安装与配置步骤，应查阅原始仓库及相关工具文档。
2. 在终端执行 `npx hyperframes init my-video`，初始化名为 `my-video` 的视频项目，再执行 `cd my-video` 进入目录。README 使用 npx 启动工具，未要求先全局安装 HyperFrames。
3. 如需安装独立的助手技能，可在视频项目目录执行 `npx hyperframes skills update`。交互式替代方式为 `npx skills add heygen-com/hyperframes`，打开选择器后选择 Core Skills 组。README 提醒：不要在 HyperFrames 源码仓库中使用项目级技能安装目标，以免与受版本管理的技能源码重叠并覆盖未提交修改。
4. 如选择桌面应用，从页面下方原始仓库获取对应下载入口。README 列出了 macOS、Windows 和 Linux 的 .deb 下载入口，但所给资料未提供下载后的安装步骤。
5. 仅在需要克隆完整仓库进行开发时，按 README 先安装 Git LFS：macOS 使用 `brew install git-lfs`，Ubuntu 或 Debian 使用 `sudo apt install git-lfs`，Windows 使用 `winget install GitHub.GitLFS`，随后执行一次 `git lfs install`。克隆地址从页面下方原始仓库获取；所给资料未提供完整的源码依赖安装与构建流程，应继续查阅 CONTRIBUTING.md。
