Hyper Frames 学习笔记

Hyper Frames 基本介绍

Hyper Frames 是什么

HyperFrames 是由 HeyGen 团队开源的一款视频渲染框架，核心理念为 Write HTML. Render video. Built for agents（写 HTML，渲染视频，专为 AI 智能体设计）

• Github 仓库：https://github.com/heygen-com/hyperframes
• 官方文档：https://hyperframes.heygen.com/introduction

Hyper Frames 有什么用

• 写代码制作视频：无需 PR、AE 等专业剪辑软件，基于 HTML + CSS + JS 即可编写画面、字幕、布局和动画，把视频制作变成写网页
• 程序化制作动画：原生支持 GSAP、Lottie、Three.js 等前端生态，可快速实现渐变过渡、字幕逐字动画、图形动效乃至 3D 场景渲染
• 批量自动化出片：以代码为视频模板，支持替换文案、图片、数据参数，一键批量生成多版本差异化视频素材
• 代码版本可控：视频工程以代码形式托管，支持 Git 版本管理、追溯历史版本、多人协作复用模板
• 适配 AI Agent 工作流：大模型可直接生成合法的 Hyper Frames 代码，实现自然语言转视频的全自动生成链路
• 数据驱动生成视频：可读取 JSON、CSV 等数据，动态渲染文字、图表、数据大屏，自动制作数据可视化解说视频
• 多格式统一渲染：支持导出 MP4、WebM、MOV 等主流视频格式，适配短视频、广告投放、课程教程等多场景发布
• 低门槛模板复用：一次搭建通用视频模板，后续仅替换内容即可快速产出新视频，大幅降低重复剪辑成本

为什么需要 Hyper Frames

痛点	传统人工方案	Hyper Frames 方案
成本高	真人拍摄视频，需场地、设备、演员	只需一张照片 + 一段音频，成本趋近于零
效率低	拍摄、剪辑、后期，周期长	几分钟内生成，可批量处理
门槛高	需要专业视频制作技能	只需要向 AI 描述要求，即可生成对应视频

Hyper Frames 的适用场景

适合所有模板化、批量生成、自动化集成、需要版本控制的视频场景：

• 营销短视频：批量生成产品介绍、社媒广告、TikTok 风格内容
• 数据可视化视频：把 CSV / 数据库数据 自动转为动态图表、周报数据片
• 教程 / 演示视频：网站录屏、软件操作演示、课程动画（可代码化复现）
• AI Agent 工作流：作为 Claude Code、Cursor 等工具的视频生成执行层，接入 CI/CD 自动化流水线
• 程序化广告创意：模板批量生成差异化素材，用于 A/B 测试与个性化投放

Hyper Frames vs Remotion

HyperFrames 的创作者深受 Remotion 启发：团队曾在 HeyGen 生产环境中深度落地 Remotion，借鉴其核心设计思想，并在 HyperFrames 源码中保留注释，致敬 Remotion 开创的经典架构范式 ——Chrome 无头启动参数、image2pipe 管道推流、帧缓冲区与 FFmpeg 流式编码 等底层设计。

HyperFrames 与 Remotion 底层原理高度同源，均依托无头 Chrome 完成页面渲染与逐帧抓帧，搭配 FFmpeg 实现音视频编码合成，同时都具备确定性帧渲染特性，相同配置可输出像素级一致的视频成片。

二者最核心分水岭在于视频创作载体与开发门槛：

• Remotion：以 React TSX 组件 为核心创作载体，重度依赖 React 技术栈；
• HyperFrames：以 原生 HTML/CSS/JS 为创作载体，复用前端通用技术，无需框架学习成本。

除此之外，在工程构建、动画精度、生态适配、AI 集成、商用授权等维度差异显著。AI 生态层面，Remotion 偏向开发者自定义拓展集成；HyperFrames 原生轻量化设计，天生适配大模型与 AI Agent，可直接由 Claude 等生成可用视频代码，接入自动化流程更便捷

对比维度	Hyperframes	Remotion
视频创作方式	原生 HTML + CSS + GSAP	React TSX 组件化开发
工程构建流程	无需打包，index.html 可直接运行渲染	依赖打包器，必须编译构建
动画时序精度	支持精准逐帧定位，时序完全可控	依赖系统时钟播放，帧对齐精度较弱
现有页面复用	任意网页代码直接粘贴即可动画化	需改造适配、转译为 JSX 语法
分布式渲染能力	目前仅支持单机本地渲染	支持 AWS Lambda，具备生产级分布式渲染
开源商用权限	完全开源，无限制商用	仅源码可见，并非开源，商用有约束
新手入门门槛	低，懂基础前端即可上手	高，必须掌握 React + TS 技术栈
AI 原生适配	专为 AI Agent 设计，大模型可直接生成合规代码	偏向手动开发，AI 适配需自定义改造

Hyper Frames vs Seedance

HyperFrames 属于代码化视频渲染框架，Seedance 是文生视频大模型，二者虽都能生成视频，但底层逻辑、创作逻辑、可控性与适用场景完全不同

HyperFrames 依靠 HTML/CSS/GSAP 编写画面与动画，通过无头 Chrome 逐帧精准渲染、FFmpeg 编码合成；全程代码驱动、帧级可控、结果可复现，支持模板复用、批量出片、Git 版本管理，擅长字幕动画、企业宣传片、数据可视化、程序化广告素材等规整、模板化、高精度视频场景。

Seedance 是生成式 AI 大模型，依靠文字 / 图片提示词，通过扩散模型全自动脑补生成画面，无需写任何代码；优势是快速生成写实人像、剧情短片、创意氛围感视频，但画面随机性强、帧时序不可控、无法精准定制布局文案，不适合标准化模板批量制作

对比维度	HyperFrames	Seedance 文生视频大模型
产品定位	程序化视频渲染框架	生成式文生视频大模型
创作方式	HTML/GSAP 代码编写，精雕细琢	文字 / 图片提示词，AI 自动生成
可控程度	像素级精准，时序、文案、布局完全可控	概率式生成，画面细节不可控、不可复现
结果确定性	同代码多次渲染，成片完全一致	相同提示词，每次生成画面都不同
核心优势	模板复用、批量出片、版本管理、企业商用	零代码、出片快、写实画风、剧情创意
适用场景	企业介绍、数据视频、字幕动画、广告批量素材	真人写实短片、创意剧情、氛围感短视频
技术依赖	前端技术 + Chrome + FFmpeg	大模型算力 + 生成式扩散算法
AI 扮演角色	AI 辅助写视频代码，人主导设计	AI 全权创作，人只提需求想法

Hyper Frames 使用教程

方式一：纯手动使用

• Step1：环境准备

  安装 Hyper Frames 前需要先安装下面两个

  1. Node.js 22+：CLI和开发服务器的运行时
  2. FFmpeg ：用于本地渲染的视频编码

• Step2：安装 Hyper Frames

  1. 方式一：临时安装（官方推荐）

     # 使用 npx 临时安装 hyperframes，并初始化一个项目 my-video
     npx hyperframes init my-video
     

     上述指令创建项目，会默认启动一个交互式向导，带你完成示例选择和媒体导入。如果你是老手，想要要跳过提示，请使用下面的指令

     npx hyperframes init my-video --non-interactive --example blank
     

     参数	作用
     --non-interactive	无交互、全自动、不提问
     --example blank	使用空白模板，最简结构

     如果不跳过提示，就会来到下面的选项页面

     

     模板名称	中文直译	通俗作用 & 适用场景
     Blank	空白模板	纯空项目，只有基础脚手架结构，无任何示例动画、无多余代码；适合从零自己写，最干净。
     Warm Grain	暖调颗粒质感	自带复古暖色调 + 胶片颗粒滤镜、柔和光影；适合人文旁白、生活治愈、文艺科普类视频。
     Play Mode	播放演示模式	内置时间线演示、画面循环动效、播放器样式；适合功能演示、产品演示、UI 界面介绍视频。
     Swiss Grid	瑞士网格版式	瑞士极简排版网格系统，规整分栏、理性布局、干净文字；适合企业介绍、数据看板、简约文案片头。
     Vignelli	维内利经典版式	经典现代主义排版、极简黑白灰、优雅文字层级；适合高端品牌、商务简介、极简字幕大片。
     Decision Tree	决策树模板	自带分支结构、流程连线、节点动画；适合业务流程、逻辑讲解、知识科普、流程图解说视频。
     Kinetic Type	动态文字排版	专业文字动效模板，文字逐字飞入、弹跳、渐变、位移；适合金句片头、语录、标语宣传。
     Product Promo	产品宣传模板	现成产品宣传片结构：标题、卖点罗列、图文切换、收尾 LOGO；直接改文字就能做产品广告。
     NYT Graph	纽约时报图表风	极简新闻风数据图表、折线 / 柱状简约动效；适合数据汇报、行业分析、财经科普类视频。

     这里我选择了 Product Promo

  2. 方式二：全局安装

     # 全局安装 hyperframes
     npm install -g hyperframes
     # 初始化项目
     hyperframes init my-video
     

  对比项	临时安装（npx 方式）	全局持久化安装
  安装命令	npx hyperframes init 项目名	npm install -g hyperframes
  存放位置	系统 npm 缓存目录：C:\Users\你的用户名\AppData\Local\npm-cache\_npx	系统 npm 全局目录：C:\Users\你的用户名\AppData\Roaming\npm\node_modules\hyperframes
  生命周期	临时缓存，长时间不用 npm 自动清理	永久驻留，不会自动删除
  命令使用方式	每次必须带 npx，不能直接裸用 hyperframes	任意目录可直接执行 hyperframes 命令，无需加 npx
  卸载 / 清理方式	等待自动清理 或 手动清 npm 缓存	需手动执行：npm uninstall -g hyperframes
  环境污染	不污染全局环境	占用全局环境，长期留存

• Step3：编写 HTML

  cd my-video
  

  进入初始化后的项目，会发现以下结构

  

• Step4：预览效果

  npx hyperframes preview
  

• Step5：导出视频

  npx hyperframes render
  

方式二：配合 Agent 使用（推荐）

方式一使用太繁琐了，既要手动创建项目、又要手动安装各类环境、还要手动预览调试，此外，你还需要熟悉 Hyper Frames 项目结构，熟悉 HTML 语法，对于新手而言，是有一定难度的。所以官方也是极力推荐 Agent 方式，同时他们自己的官网的所有视频也都是使用这种方式生成的，你只需要一句话就能让 Agent 自动给你生成你所需的视频

• Step1：环境准备

  1. 准备好 Claude、Codex、Cursor 等 Agent 工具
  2. 购买好对应的大模型 Token（多买点，生成视频很费 Token）

• Step2：安装 HyperFrames skills

  # 临时下载 skills，并使用 skills 工具将 HyperFrames skills 安装到当前目录的 skills 文件夹下
  npx skills add heygen-com/hyperframes
  

  这会让你的 Agent（Claude Code、Cursor、Gemini CLI、Codex）学会如何编写正确的作品、GSAP 时间线、Tailwind v4 浏览器运行时样式以及第一方适配器动画。

  在 Claude 中执行，他会默认自动将所有的 15 个 skills 全部下载完

  

  在 cmd 中执行，会让你选择下载指定的 skill

  

  下面是这 15 个 skill 的简单介绍，如果你想看更加详细的介绍，可以下载对应的 skill，直接看它的 SKILL.md 文件内容即可

  skill	作用说明
  animejs	集成 Anime.js 动画库，用来做轻量灵活网页补间、路径、变形动画，支持 HyperFrames 逐帧精确控制
  contribute-catalog	官方组件模板仓库，可一键引入预制字幕、转场、图表组件，也能自定义组件提交社区共享
  css-animations	适配原生 CSS 关键帧动画，不用写 JS，直接 CSS 动画就能被引擎识别、精准时序播放渲染
  gsap	集成 GSAP 专业动画引擎，做复杂时间线、序列动画、缓动、3D 形变，是 HyperFrames 主力动画方案
  hyperframes	框架核心基础能力，支撑 HTML/CSS 创作视频、字幕编排、音频联动、时间线调度、视频渲染底层
  hyperframes-cli	命令行工具，用于初始化项目、预览、导出 MP4、环境检测、字幕 / 语音合成等运维打包能力
  hyperframes-media	媒体音视频处理能力，支持嵌入视频音频、片段剪辑、混音、滤镜转码；依赖 FFmpeg，兼容性易出问题
  hyperframes-registry	技能 / 组件注册中心，一键安装官方和社区插件、特效、区块，自动配置依赖无需手动配置
  lottie	接入 Lottie 矢量动画，可直接加载 AE 导出的 JSON 动效，图标、角色动画无损缩放、体积小
  remotion-to-hyperframes	Remotion 项目迁移工具，把 React TSX 写法自动转成 HyperFrames 纯 HTML 项目，降低迁移成本
  tailwind	内置 Tailwind CSS，用工具类快速排版布局、配色样式，不用手写原生 CSS，极速搭建画面
  three	集成 Three.js 3D 引擎，可在视频里做 3D 场景、模型、灯光、粒子、3D 文字动画
  typegpu	基于 WebGPU 硬件加速，做高性能像素特效、流体、光效、大规模粒子与数据可视化渲染
  waapi	封装浏览器原生 Web 动画 API，轻量高性能，可暂停、倒放、精准定位，介于 CSS 动画和专业动画库之间
  website-to-hyperframes	网页转视频工具，抓取任意网页画面与动效，自动生成时间线并导出 MP4，适合官网 / 数据看板录制成视频

  针对上述 15 个 skill，总结而言就是：

  • 核心创作：hyperframes + cli

  • 动画方案：gsap（主力）、animejs、css、lottie、waapi

  • 3D / 特效：three、typegpu、media

  • 样式 / 组件：tailwind、registry、contribute-catalog

  • 迁移 / 网页转视频：remotion-to-hyperframes、website-to-hyperframes

  如果你不想全部安装，可以根据你自己的需求按需安装

• Step3：使用 skill 生成视频

  第一次生成视频会比较慢，因为 Agent 会自动下载你当前环境所需的依赖

  需要安装的依赖有：

  • FFmpeg：视频编码、合成、导出 MP4，是生成最终视频文件的核心工具

  • Chrome headless shell：后台运行浏览器，渲染 HTML 画面、逐帧录制动画

    C:\Users\EDY\.cache\hyperframes\chrome\

  在 Claude 对话框中输入下面提示词

  使用 /hyperframes 生成一段 10 秒的视频，介绍 Hyper Frames
  

方式三：Claude Design

这种方式，除了要付 Token 的钱，还要另外购买 Claude Design 的使用权，其实本质算第二种方式，只不过这种方式相比于在 Claude CLI 中使用体验更好、学习成本更低

• Step1：下载 claude-design-hyperframes.md

  地址：https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md

• Step2：生成视频

  在 claude.ai/design 附上文件 + 描述你的视频，把文件拖到聊天里。描述你的需求——包括截图、品牌资产，或者如果有的话，也可以做一个调色板

Claude Design 介绍

Claude Design 是什么

Claude Design是 Anthropic 推出的 对话式设计工具 / 能力（不是传统软件，是 Claude 的一种用法 / 模式）。

简单说就是：你用自然语言跟 Claude 聊天，它直接给你生成可编辑的网页 / 界面 / PPT / 视频草稿（HTML+CSS），不用你写代码。

详情请参考：Claude Design官方文档

Claude Design 有什么用

1. 自然语言直接做页面

   你说需求：帮我做一个科技风片头视频封面，深色背景、发光标题、底部小字简介。Claude 直接生成完整可运行 HTML，不用自己写一行代码。

2. 一键生成动画 + 排版

   自带支持 Tailwind、GSAP、CSS 动画，你只说文案和风格，AI 自动帮你：布局、配色、字体、动效、时间线全部搞定。

3. 原型快速出稿

   做产品介绍视频、口播片头、知识科普短视频、数据可视化片头，几分钟出视觉原型，比自己写代码快几十倍。

4. 小白也能用

   不会前端、不会 GSAP、不会视频剪辑，只要会打字描述风格，就能做出专业级动画视频页面。

Claude Design vs 普通 Claude 聊天

• 普通 Claude：给你文字、代码片段
• Claude Design：直接给可运行、可预览、可渲染成视频的完整可视化成品

Claude Design 的工作原理

Claude Design 有两个主要区域：左侧是聊天界面，右侧是画布。您在聊天中描述您想要的内容，Claude 在画布上生成一个可工作的设计。从那里，您可以迭代——通过对话和内联注释进行细化，直到满意为止。

典型的流程是：

1. 创建一个项目并添加任何相关的上下文（屏幕截图、代码库）。
2. 描述您想要构建的内容。
3. 查看 Claude 在画布上生成的内容。
4. 使用聊天消息和内联注释进行迭代。
5. 当您对结果满意时，导出或分享。

如何使用 Claude Design

它是 Claude 官方推出的一种，只能在网页版 Claude 的专用页面（claude.ai/design）用，付费专享、桌面 / 终端都不支持；生成的 HTML 天然适配 HyperFrames

HyperFrames 视频生成原理

核心原理

HyperFrames 摒弃传统剪辑软件逻辑，以网页前端技术为底座，依靠 Chrome Headless 无头浏览器 做画面实时渲染、逐帧捕获，再通过 FFmpeg 完成帧序列拼接、音视频编码封装，最终生成标准 MP4 视频；本质就是：写网页做动画 → 浏览器逐帧录屏 → FFmpeg 合成成片

生成流程

HyperFrames 的代码分为四个层次，从上到下依次是：

CLI (hyperframes render)
    ↓
Producer (@hyperframes/producer)   负责完整渲染流水线
    ↓
Engine (@hyperframes/engine)       负责帧捕获
    ↓
Core (@hyperframes/core)           提供运行时、类型、FrameAdapter

核心机制：Seek-and-Capture 循环

这是 HyperFrames 最核心的机制。它不“播放”视频，而是逐帧“跳转”和“截图”。

for (let frame = 0; frame <= totalFrames; frame++) {
    const time = Math.floor(frame) / fps;  // 整数除法，无浮点误差
    await adapter.seekFrame(frame);         // 把动画拨到这一时刻
    // 捕获当前像素
}

关键点：

• 不依赖系统时钟：时间计算用整数帧号除以 fps，不依赖任何系统时钟，确保每帧精确
• 原子操作：每帧都是独立的静态快照，不存在半渲染状态
• 确定性输出：相同的输入，跑一百次，出来的视频像素级一致

帧捕获：Chrome DevTools Protocol

HyperFrames 启动的是 chrome-headless-shell（专为 CDP 控制优化的最小 Chrome 二进制），通过 Chrome DevTools Protocol 调用 HeadlessExperimental.beginFrame 这个 API。

这个 API 的作用是：

• 显式命令合成器渲染一帧，并把像素 buffer 直接返回给调用方
• 没有“等渲染完成”的时序问题
• 像素直接从 GPU 合成器取，不经过截图的 IPC 拷贝流程
• 每帧是原子操作，不存在半渲染状态

FrameAdapter 协议：动画运行时的接入层

FrameAdapter 是一个标准化接口，用于连接外部动画运行时（如 GSAP、Lottie、Three.js）与渲染引擎。

type FrameAdapter = {
    id: string;
    init?: (ctx: FrameAdapterContext) => Promise<void> | void;
    getDurationFrames: () => number;       // 视频总帧数
    seekFrame: (frame: number) => void;    // 把动画拨到第 N 帧
    destroy?: () => void;
};

关键要求：

• seekFrame 必须是幂等的：同一帧调两次结果相同
• seekFrame 必须支持随机 seek：可以先 seek 第 90 帧再 seek 第 10 帧，不能有顺序依赖

以 GSAP 为例，它的 adapter 实现大概是：

seekFrame(frame) {
    const time = frame / fps;
    gsap.globalTimeline.pause();
    gsap.globalTimeline.seek(time);  // 直接拨时间轴
}

window.__hf 协议：引擎和页面的通信桥

引擎（Node.js 进程）和页面（浏览器内）之间通过 window.__hf 对象通信：

interface HfProtocol {
    duration: number;          // 视频总时长（秒）
    seek(time: number): void;  // 引擎调这个来驱动帧 seek
    media?: HfMediaElement[];  // 音视频元素声明（给引擎做音频抽取用）
}

页面加载完成后，Core 注入的运行时把自己挂在 window.__hf 上。引擎每帧调 page.evaluate(() => window.__hf.seek(t))，页面内的 FrameAdapter 响应，GSAP 时间轴被拨到对应位置，然后引擎立刻调 beginFrame 捕获。

音频处理：单独抽取，最后混合

浏览器渲染是纯视觉的，音频不能从帧里捕获。Producer 的做法是把音频流程完全分离：

1. 解析 HTML 里的音频元素：识别 <audio> 或 <video> 标签
2. 单独抽取音频流：使用 FFmpeg 从源文件中提取音频
3. 时间轴对齐：根据 data-start 和 data-duration 属性，将音频片段对齐到视频时间线
4. 最后混合：在视频帧序列编码完成后，用 FFmpeg 将音频混合到最终 MP4 中

完整渲染流水线

用户编写 HTML 文件
    ↓
CLI 调用 Producer
    ↓
Producer 启动 chrome-headless-shell
    ↓
页面加载 HTML，Core 注入运行时
    ↓
Engine 开始 Seek-and-Capture 循环
    ├── 第 0 帧：seek(0) → beginFrame → 捕获像素
    ├── 第 1 帧：seek(1/fps) → beginFrame → 捕获像素
    ├── 第 2 帧：seek(2/fps) → beginFrame → 捕获像素
    └── ...直到 totalFrames
    ↓
Producer 将帧序列传给 FFmpeg 编码为视频
    ↓
Producer 处理音频流，混合到视频中
    ↓
输出最终 MP4 文件

参考资料：

• https://hyperframes.heygen.com/introduction
• https://zhuanlan.zhihu.com/p/2037524891298215582