HyperFrames

HyperFrames 是由 HeyGen 官方开源的 HTML 原生视频渲染框架，核心理念为 "Write HTML. Render video. Built for agents."。视频合成物（composition）是纯 HTML 文件，通过 data-start、data-duration、data-track-index 等 data 属性声明时间轴与多轨道布局，无需 React 或私有 DSL。渲染管线基于 headless Chrome 的 beginFrame API 逐帧捕获像素，经 FFmpeg image2pipe 管道编码为确定性 MP4 输出。

框架采用 Frame Adapter 模式，可插拔接入 GSAP、Anime.js、Lottie、Three.js、CSS Animations、WAAPI 等动画运行时，通过 window.__hf* 全局钩子实现任意帧的可寻址播放。内置 50+ 可复用组件目录，涵盖社交叠层、shader 转场、数据可视化、电影级效果等。

AI Agent 支持是一等公民设计：CLI 默认非交互式纯文本输出，内置 Skills 系统可通过 npx skills add heygen-com/hyperframes 一键集成到 Claude Code、Cursor、Gemini CLI、Codex 等主流 AI 编码 agent，注册为 /hyperframes、/gsap、/tailwind 等 slash command。还提供 website-to-hyperframes（URL 转视频）和 remotion-to-hyperframes（Remotion 迁移）等专用 skill。

项目为 TypeScript monorepo（96.5% TS），包含 CLI 入口、核心解析/校验、逐帧捕获引擎、渲染管线、可视化编辑器（Studio）、Web Component 播放器、shader 转场等 7 个包。开发体验方面支持浏览器实时预览（live reload）、Tailwind v4 浏览器运行时、内置 lint/TTS/转录等工具。

适用场景：AI Agent 自动生成视频、产品/营销视频制作、数据可视化动画（如 bar chart race）、短视频（9:16 竖屏）、PDF 摘要视频、网站录制转视频、CI/CD 自动化渲染管线、Remotion 项目迁移。

Monorepo 包结构：

• hyperframes — CLI 入口
• @hyperframes/core — 类型定义、HTML 解析器、生成器、linter、运行时、Frame Adapters
• @hyperframes/engine — 可寻址逐帧捕获引擎（Puppeteer + headless Chrome beginFrame）
• @hyperframes/producer — 完整渲染管线（capture → FFmpeg encode → 音频混流）
• @hyperframes/studio — 浏览器端可视化合成物编辑器 UI
• @hyperframes/player — 可嵌入 <hyperframes-player> Web Component
• @hyperframes/shader-transitions — WebGL shader 转场效果

待确认：分布式渲染（多机/Lambda）的官方时间线；@hyperframes/player Web Component API 文档完整性；与 HeyGen 商业产品的集成方式；Windows 平台完整支持情况。