HyperFrames 使用指南：用 HTML 写视频，前端开发者的视频创作新范式
HeyGen 在 2026 年 5 月开源了 HyperFrames，一个让你用 HTML/CSS/JS 就能生成 MP4 视频的渲染框架。它不是又一个视频剪辑工具，而是一套为 AI Agent 设计的「视频即代码」范式。
引言：为什么 HyperFrames 值得关注
2026 年 5 月，AI 视频公司 HeyGen 做了一件让人意外的事——他们没有发布新的 AI 视频生成模型，而是开源了一个叫 HyperFrames 的工具。
这个工具的核心思想很简单：写 HTML，渲染视频。
听起来平平无奇？但如果你深入了解它的设计理念，会发现这可能是视频创作领域的一次范式转移。
HyperFrames 是什么？
HyperFrames 是一个 HTML → MP4 的本地渲染框架。它的工作原理：
整个过程纯本地运行，不需要上传任何素材到云端。
为什么说它是「AI 原生」的？
HyperFrames 的真正野心，是让 AI Agent 能直接创作视频。
想想看：AI 最擅长写什么？代码。尤其是 HTML/CSS/JS 这种前端代码，大模型已经练得炉火纯青。
传统视频剪辑软件？AI 根本不会用。但如果视频就是 HTML，那 AI 创作视频就变成了「写代码」这件它已经很擅长的事。
这就是 HyperFrames 的 slogan：Write HTML. Render video. Built for agents.
谁应该用 HyperFrames？
- 前端开发者：想用熟悉的技术栈做视频动画
- 内容创作者：想批量生成短视频、数据可视化视频
- AI 应用开发者：想在产品中集成视频生成能力
- 技术博主：想把文章自动转成视频内容
一、环境准备：三个依赖，缺一不可
HyperFrames 的依赖很少，但每一个都必须正确安装。
1.1 Node.js ≥ 22
HyperFrames CLI 要求 Node.js 22 或更高版本。这是因为它使用了一些较新的 Node.js API。
检查版本：
node –version
# v22.0.0 或更高
如果版本不够，去官网下载安装：Node.js 官方下载
💡 小技巧：Windows 用户建议用 .msi 安装包，Mac 用户推荐用 Homebrew：brew install node@22
1.2 FFmpeg
FFmpeg 是视频编码的核心，HyperFrames 用它把帧图片合成视频。
Mac（Homebrew）：
brew install ffmpeg
Ubuntu/Debian：
sudo apt update && sudo apt install ffmpeg
Windows：
验证安装：
ffmpeg -version
1.3 Chrome / Chromium
HyperFrames 会自动下载 Chromium，通常不需要手动安装。
但如果你网络环境不好，可以提前安装好 Chrome，HyperFrames 会自动检测系统中的 Chrome。
1.4 环境检查清单
在开始之前，确保这三个命令都能正常输出：
node –version # ≥ v22.0.0
ffmpeg -version # 正常输出版本信息
npx –version # npm 附带的工具
二、快速上手：5 分钟做出第一个视频
2.1 初始化项目
打开终端，运行：
npx hyperframes init my-first-video
这会创建一个 my-first-video 目录，里面包含完整的项目模板。
进入目录：
cd my-first-video
2.2 项目结构解析
初始化后的目录结构：
my-first-video/
├── index.html # 主视频文件（入口）
├── meta.json # 视频元数据配置
├── compositions/ # 分镜头/子合成
│ └── intro.html
├── assets/ # 静态资源
│ ├── images/
│ └── audio/
└── output/ # 渲染输出目录（自动创建）
各文件作用：
| index.html | 主入口，包含主 composition，定义视频的整体结构 |
| meta.json | 视频的全局配置：分辨率、帧率、时长等 |
| compositions/ | 存放子合成（分镜头），每个 HTML 是一个独立的场景 |
| assets/ | 图片、音频、字体等素材 |
2.3 实时预览
在项目目录下运行：
npx hyperframes preview
这会启动一个本地服务器（默认端口 3002），自动打开浏览器。
你会看到视频的实时预览效果。修改 HTML 文件，保存后浏览器会自动刷新——这就是 hot reload。
💡 预览模式是调试神器。在渲染最终视频之前，一定要先用 preview 模式把动画、时间轴都调好。
2.4 渲染导出视频
预览满意后，渲染成 MP4：
npx hyperframes render
默认会输出到 output/video.mp4。
渲染过程中你会看到进度条：
✔ Capturing frames… 150/150
✔ Encoding video…
✔ Mixing audio…
✔ Done! Output: output/video.mp4
2.5 自定义渲染参数
# 指定帧率和质量
npx hyperframes render –fps 30 –quality high
# 自定义输出文件名
npx hyperframes render -o my-video.mp4
# 只渲染指定的 composition
npx hyperframes render –composition intro
# 低质量快速渲染（用于测试）
npx hyperframes render –quality low
常用参数表：
| –fps | 帧率 | 24 |
| –quality | 渲染质量：low/medium/high | medium |
| -o, –output | 输出文件路径 | output/video.mp4 |
| –format | 输出格式：mp4/webm | mp4 |
| –composition | 只渲染指定 composition | 全部 |
三、核心概念：理解 HyperFrames 的设计哲学
在深入使用之前，有几个核心概念必须搞懂。
3.1 Composition（合成）
Composition 是 HyperFrames 的基本单位。你可以把它理解为「一个镜头」或「一个场景」。
一个 composition 就是一个 HTML 文件，里面包含：
- 一个带 data-composition-id 属性的根容器
- 该场景的所有视觉元素
- 对应的动画时间轴
主 Composition
index.html 中的是主 composition，它定义了视频的整体参数：
<div id="stage"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-duration="10">
<!– 视频内容 –>
</div>
关键属性：
- data-composition-id：composition 的唯一标识
- data-width / data-height：视频分辨率（像素）
- data-duration：总时长（秒）
子 Composition
复杂的视频通常由多个场景组成，每个场景是一个子 composition。
子 composition 定义在 compositions/ 目录下，用 <template> 标签包裹：
<!– compositions/scene1.html –>
<template id="scene1">
<div data-composition-id="scene1"
data-width="1920"
data-height="1080"
data-duration="5">
<!– 场景1的内容 –>
</div>
</template>
⚠️ 注意：独立 HTML 文件（直接渲染的文件）不要用 <template> 标签，直接把 composition div 放在 <body> 里。只有作为子 composition 被引用时才需要 <template>。
3.2 时间轴系统
HyperFrames 用 data-* 属性来控制元素的时间行为。
元素级时间控制
每个元素都可以设置出场时间和持续时间：
<!– 第 2 秒出现，持续 3 秒 –>
<div class="title"
data-start="2"
data-duration="3">
Hello HyperFrames
</div>
时间属性说明：
| data-start | 元素开始显示的时间 | 秒 |
| data-duration | 元素显示的持续时间 | 秒 |
| data-end | 元素结束显示的时间（和 duration 二选一） | 秒 |
| data-track | 元素所在的轨道（用于层级管理） | 数字 |
时间计算规则
- 如果同时设置了 data-duration 和 data-end，以 data-end 为准
- 没有设置时间属性的元素会全程显示
- 时间可以是小数，比如 data-start="1.5"
3.3 GSAP 动画系统
HyperFrames 深度集成了 GSAP（GreenSock Animation Platform），这是业界最强大的 JS 动画库。
为什么用 GSAP？
CSS 动画虽然简单，但有几个问题：
GSAP 解决了这些问题，而且性能比 CSS 动画更好。
基本用法
在 HTML 中引入 GSAP：
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
编写动画：
// 创建一个暂停的时间轴（必须 paused: true）
const tl = gsap.timeline({ paused: true });
// 第 0 秒：标题从左边滑入
tl.from(".title", {
x: –200,
opacity: 0,
duration: 1,
ease: "power4.out"
}, 0);
// 第 1.5 秒：副标题淡入
tl.from(".subtitle", {
opacity: 0,
y: 30,
duration: 0.8
}, 1.5);
// 注册到 HyperFrames（必须！）
window.__timelines = [tl];
三个关键规则
必须 paused: true
时间轴必须是暂停状态的。HyperFrames 会自己控制播放进度，逐帧渲染。如果时间轴自动播放，会导致渲染混乱。
必须注册到 window.__timelines
HyperFrames 通过 window.__timelines 数组来发现所有动画时间轴。不注册的话，动画不会被渲染。
用绝对时间定位
推荐用 tl.to(…, 时间) 的方式指定动画开始时间，这样和 data-start 等属性的时间体系一致。
GSAP 常用动画效果
// 淡入
tl.from(".element", { opacity: 0, duration: 1 }, 0);
// 从左滑入
tl.from(".element", { x: –100, opacity: 0, duration: 1 }, 0);
// 从下滑入 + 弹性效果
tl.from(".element", {
y: 100,
opacity: 0,
duration: 1,
ease: "back.out(1.7)"
}, 0);
// 缩放出现
tl.from(".element", {
scale: 0.5,
opacity: 0,
duration: 0.8,
ease: "back.out"
}, 0);
// 交错动画（多个元素依次出现）
tl.from(".card", {
y: 50,
opacity: 0,
duration: 0.6,
stagger: 0.2 // 每个元素间隔 0.2 秒
}, 1);
// 文字逐字显现
tl.from(".char", {
y: 20,
opacity: 0,
duration: 0.5,
stagger: 0.05
}, 0.5);
四、HTML 编写规范与最佳实践
4.1 画布设置
#stage 容器
所有视频内容必须放在 #stage 容器内：
<div id="stage"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-duration="10">
<!– 内容 –>
</div>
分辨率选择
常用分辨率：
| 横屏视频/YouTube | 1920×1080 | 16:9 |
| 竖屏短视频/抖音 | 1080×1920 | 9:16 |
| 方形/Instagram | 1080×1080 | 1:1 |
| 4K 高清 | 3840×2160 | 16:9 |
💡 建议：先用 1280×720 调试，最终渲染再用 1920×1080。高分辨率渲染速度会慢很多。
像素级精确
因为是浏览器渲染，所以所有尺寸都是像素精确的。你可以像做网页一样精确控制每个元素的位置。
/* 1920×1080 的画布，内容居中 */
#stage {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
}
4.2 元素时间控制的最佳实践
用 data-track 管理层级
当元素很多时，用 data-track 来组织：
<!– 背景层 –>
<div class="bg" data-track="0" data-start="0" data-duration="10"></div>
<!– 标题层 –>
<h1 class="title" data-track="1" data-start="0.5" data-duration="8"></h1>
<!– 内容层 –>
<div class="content" data-track="2" data-start="2" data-duration="6"></div>
虽然 data-track 不直接影响 z-index，但它能帮你理清元素的层级关系。
时间规划技巧
做视频前，先画一个时间轴草图：
时间轴（秒）：0 1 2 3 4 5 6 7 8 9 10
标题 [==========]
副标题 [===============]
图片卡片 [==========]
结尾文字 [=================]
然后把这个时间轴翻译成 data-start 和 data-duration。
4.3 动画编写指南
CSS 动画 vs GSAP 动画
| 简单的淡入淡出、平移 | CSS 动画即可 |
| 复杂序列、交错动画 | GSAP |
| 需要精确时间控制 | GSAP |
| 弹性、弹跳等特殊缓动 | GSAP |
| 循环动画 | CSS 动画 |
💡 经验法则：如果动画超过 3 个元素，或者有时间顺序要求，直接用 GSAP。
CSS 动画示例
/* 简单的淡入 */
.fade-in {
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
<!– 第 1 秒开始淡入 –>
<div class="fade-in"
style="animation-delay: 1s; opacity: 0;"
data-start="1" data-duration="9">
内容
</div>
⚠️ 注意：CSS 动画的 animation-delay 要和 data-start 保持一致，否则预览和渲染可能不一致。
GSAP 动画的正确姿势
// 1. 创建暂停的时间轴
const tl = gsap.timeline({ paused: true });
// 2. 按时间顺序添加动画
tl.from(".title", {
x: –100,
opacity: 0,
duration: 1,
ease: "power4.out"
}, 0); // 第 0 秒开始
tl.from(".subtitle", {
y: 30,
opacity: 0,
duration: 0.8
}, 1.2); // 第 1.2 秒开始
// 3. 注册到 window.__timelines
window.__timelines = [tl];
4.4 音频处理
添加背景音乐
<audio src="assets/audio/bgm.mp3"
data-start="0"
data-duration="10"
data-volume="0.3">
</audio>
添加语音旁白
<audio src="assets/audio/voiceover.mp3"
data-start="0.5"
data-volume="1.0">
</audio>
音频属性：
| data-start | 音频开始播放的时间 |
| data-duration | 音频播放时长（不设置则播放完整） |
| data-volume | 音量，0.0 – 1.0 |
💡 音频对齐技巧：先确定旁白的时间点，再根据旁白来安排画面元素的出现时间。
五、高级用法：分镜头与多场景视频
简单的视频一个 composition 就够了，但复杂的视频需要多个场景。
5.1 Compositions 分镜头系统
什么是分镜头？
分镜头（Composition）就是视频中的一个独立场景。每个场景有自己的时间轴和元素。
创建子 Composition
在 compositions/ 目录下创建 HTML 文件：
<!– compositions/scene-intro.html –>
<template id="scene-intro">
<div data-composition-id="scene-intro"
data-width="1920"
data-height="1080"
data-duration="3">
<div class="intro-bg"></div>
<h1 class="intro-title" data-start="0.5" data-duration="2.5">
欢迎来到 HyperFrames
</h1>
</div>
</template>
在主 Composition 中引用
<!– index.html –>
<div id="stage"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-duration="15">
<!– 场景1：第 0 秒开始，持续 3 秒 –>
<div data-composition-ref="scene-intro"
data-start="0"
data-duration="3"></div>
<!– 场景2：第 3 秒开始，持续 5 秒 –>
<div data-composition-ref="scene-features"
data-start="3"
data-duration="5"></div>
<!– 场景3：第 8 秒开始，持续 7 秒 –>
<div data-composition-ref="scene-outro"
data-start="8"
data-duration="7"></div>
</div>
用 data-composition-ref 引用子 composition，用 data-start 和 data-duration 控制它在主时间轴上的位置。
5.2 转场动画设计
场景之间的转场是视频质感的关键。
淡入淡出转场
最简单也最常用的转场：
// 场景1淡出
tl.to(".scene1", { opacity: 0, duration: 0.5 }, 2.5);
// 场景2淡入
tl.from(".scene2", { opacity: 0, duration: 0.5 }, 3);
滑动转场
// 向左滑出
tl.to(".scene1", { x: –1920, duration: 0.8, ease: "power2.inOut" }, 2.5);
// 从右滑入
tl.from(".scene2", { x: 1920, duration: 0.8, ease: "power2.inOut" }, 2.5);
缩放转场
// 缩小退出
tl.to(".scene1", {
scale: 0.8,
opacity: 0,
duration: 0.6,
ease: "back.in"
}, 2.5);
// 放大进入
tl.from(".scene2", {
scale: 1.2,
opacity: 0,
duration: 0.6,
ease: "back.out"
}, 2.7);
创意转场：遮罩揭示
.mask-reveal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
clip-path: circle(0% at 50% 50%);
}
// 圆形揭示
tl.to(".mask-reveal", {
clipPath: "circle(100% at 50% 50%)",
duration: 1,
ease: "power2.inOut"
}, 2.5);
5.3 模板复用：建立你的视频设计系统
做视频和做设计一样，建立一套可复用的组件库能极大提高效率。
设计系统的思路
示例：标题卡片组件
<!– components/title-card.html –>
<template id="title-card">
<div class="title-card">
<div class="title-card__line"></div>
<h2 class="title-card__text"></h2>
</div>
</template>
/* components/title-card.css */
.title-card {
position: absolute;
top: 100px;
left: 100px;
}
.title-card__line {
width: 60px;
height: 4px;
background: #0066ff;
margin-bottom: 16px;
}
.title-card__text {
font-size: 48px;
font-weight: 700;
color: #fff;
margin: 0;
}
然后在各个场景中复用这个组件，只需要改文字内容。
六、CLI 命令完全手册
6.1 init：初始化项目
# 交互式创建
npx hyperframes init my-project
# 指定模板
npx hyperframes init my-project –template minimal
# 静默模式（不询问）
npx hyperframes init my-project –yes
可用模板：
- default：默认模板，包含示例场景
- minimal：最小模板，只有基础结构
- data-viz：数据可视化模板
- product：产品介绍模板
6.2 preview：实时预览
# 默认端口 3002
npx hyperframes preview
# 指定端口
npx hyperframes preview –port 4000
# 不自动打开浏览器
npx hyperframes preview –no-open
预览模式的特点：
- 热重载：修改文件自动刷新
- 时间轴控制器：可以暂停、拖动、逐帧查看
- 网格参考线：辅助对齐
6.3 render：渲染导出
# 基础渲染
npx hyperframes render
# 自定义参数
npx hyperframes render \\
–fps 30 \\
–quality high \\
–format mp4 \\
-o output/final.mp4
# 渲染单个 HTML 文件（不用项目结构）
npx hyperframes render ./my-video.html -o output.mp4
# 只渲染指定 composition
npx hyperframes render –composition scene-intro
质量参数对比：
| low | 低 | 快 | 小 | 快速预览、测试 |
| medium | 中 | 中 | 中 | 日常使用 |
| high | 高 | 慢 | 大 | 最终输出 |
6.4 lint：语法检查
# 检查所有 HTML
npx hyperframes lint
# 检查指定文件
npx hyperframes lint index.html
lint 会检查：
- 缺少必要的 data 属性
- 时间轴冲突
- GSAP 时间轴未注册
- 资源路径错误
- 语法错误
💡 强烈建议：渲染前先跑一遍 lint，能避免很多低级错误。
七、与 AI Agent 结合：全自动视频生成
这才是 HyperFrames 的真正威力所在。
7.1 Claude Code 集成
HyperFrames 官方提供了 Claude Code 的 skill 插件。
安装 Skills
npx skills add heygen-com/hyperframes
这会安装三个 skill：
- hyperframes：核心视频创作能力
- hyperframes-cli：CLI 命令助手
- gsap：GSAP 动画助手
使用方式
在 Claude Code 中，直接用自然语言描述你想要的视频：
/hyperframes 帮我做一个 10 秒的产品介绍视频，主题是「AI 编程助手」，风格要科技感、深色背景。
Claude 会自动：
7.2 典型工作流：文章转视频
这是技术博主最实用的场景——把一篇文章自动转成视频。
步骤 1：提炼脚本
把文章交给 AI，让它提炼成适合听的旁白脚本：
把这篇文章改写成 90 秒的视频旁白文案，口语化，有节奏感。
步骤 2：生成 TTS 语音
用 TTS 工具把旁白转成语音文件。
步骤 3：生成分镜
根据这段旁白，生成一个 HyperFrames 视频的分镜脚本，包含 6-8 个场景。
每个场景要有：画面描述、文字内容、持续时间。
步骤 4：AI 编写 HTML
根据上面的分镜，用 HyperFrames 格式编写 HTML 代码。
要求：
– 分辨率 1920×1080
– 科技感深色风格
– 使用 GSAP 动画
– 每个场景有入场和出场动画
步骤 5：渲染导出
渲染这个视频，帧率 30，高质量。
7.3 Prompt 技巧
让 AI 生成高质量视频的几个要点：
八、性能优化与常见问题
8.1 渲染速度优化
渲染速度是大家最关心的问题。这里有几个优化技巧：
1. 降低分辨率调试
# 调试用 720p
npx hyperframes render –quality low
# 最终输出再用 1080p
npx hyperframes render –quality high
2. 调整帧率
24fps 是电影标准，足够用了。30fps 更流畅但渲染时间增加 25%。
# 24fps 足够大多数场景
npx hyperframes render –fps 24
3. 减少复杂效果
- 大量阴影、模糊会拖慢渲染
- Canvas/WebGL 动画比 DOM 动画快
- 图片素材提前压缩好
4. 硬件加速
确保 Chrome 开启了硬件加速。通常默认是开启的，但在某些 Linux 环境下可能需要手动配置。
8.2 常见坑点
坑 1：渲染出来是黑屏
可能原因：
- #stage 没有设置背景色，默认透明
- 元素没有设置 data-start，但动画延迟导致前几帧不可见
- 图片路径错误，加载失败
解决方案：
#stage {
background: #000; /* 显式设置背景色 */
}
坑 2：GSAP 动画不播放
可能原因：
- 忘记设置 paused: true
- 忘记注册到 window.__timelines
- 选择器写错了
检查清单：
// ✅ 正确写法
const tl = gsap.timeline({ paused: true });
tl.from(".title", { opacity: 0, duration: 1 }, 0);
window.__timelines = [tl];
// ❌ 错误：没有 paused
const tl = gsap.timeline();
// ❌ 错误：没有注册到 __timelines
// window.__timelines = [tl]; // 这行被注释了
坑 3：字体渲染不一致
问题：预览时字体正常，渲染时变成默认字体。
原因：渲染时 Chrome 可能还没加载完字体就开始截图了。
解决方案：使用 webfontloader 确保字体加载完成：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Noto Sans SC:400,700']
},
active: function() {
// 字体加载完成后再初始化动画
initAnimation();
}
});
</script>
或者更简单的方法：把字体文件下载到本地，用 @font-face 引入。
坑 4：图片加载失败
问题：图片显示不出来，或者渲染时是空白。
原因：
- 路径写错了（相对路径 vs 绝对路径）
- 图片太大，加载慢
- 跨域问题
解决方案：
- 所有图片放到 assets/images/ 目录
- 用相对路径引用：src="assets/images/logo.png"
- 提前压缩图片，建议单张不超过 2MB
坑 5：时间轴对不上
问题：预览时动画正常，渲染后时间不对。
原因：CSS 动画的 animation-delay 和 data-start 不一致。
解决方案：
- 优先用 GSAP 动画，时间轴更可控
- 如果用 CSS 动画，确保 animation-delay = data-start
8.3 调试技巧
技巧 1：用 preview 模式的时间轴
preview 模式有一个时间轴控制器，可以：
- 暂停在任意时间点
- 逐帧前进/后退
- 拖动时间滑块快速定位
这是调试动画 timing 的最佳工具。
技巧 2：添加调试标记
/* 调试时打开，看清楚元素边界 */
.debug * {
outline: 1px solid rgba(255, 0, 0, 0.3);
}
技巧 3：先短后长
调试时把视频时长改短，比如只渲染前 3 秒：
<div id="stage" data-duration="3">
调好后再改回完整时长。
九、实战案例：从零做一个产品介绍视频
光说不练假把式。我们来完整做一个 15 秒的产品介绍视频。
9.1 脚本规划
主题：HyperFrames 产品介绍 时长：15 秒 风格：科技感、深色背景、蓝色主色调 分辨率：1920×1080
分镜表：
| 开场 | 0-3s | Logo + 主标题淡入 | 「用 HTML 写视频」 |
| 特性1 | 3-7s | 三个特性卡片依次出现 | 「前端技术栈，零学习成本」 |
| 特性2 | 7-11s | 代码示例动画 | 「GSAP 动画，专业级效果」 |
| 结尾 | 11-15s | CTA + 网址 | 「立即开始你的视频创作之旅」 |
9.2 项目初始化
npx hyperframes init product-demo
cd product-demo
9.3 编写 HTML
编辑 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HyperFrames 产品介绍</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #0a0a1a;
}
#stage {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
}
/* 背景装饰 */
.bg-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 102, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 102, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
}
.bg-glow {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
top: -200px;
right: -200px;
}
/* 场景1：开场 */
.scene1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
font-size: 80px;
font-weight: 800;
color: #fff;
margin-bottom: 24px;
background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tagline {
font-size: 48px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* 场景2：特性卡片 */
.scene2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 150px 200px;
}
.section-title {
font-size: 56px;
color: #fff;
font-weight: 700;
margin-bottom: 60px;
}
.features {
display: flex;
gap: 40px;
}
.feature-card {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
border-radius: 16px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.feature-title {
font-size: 32px;
color: #fff;
font-weight: 600;
margin-bottom: 16px;
}
.feature-desc {
font-size: 20px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
/* 场景3：代码示例 */
.scene3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 150px 200px;
}
.code-window {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.code-header {
background: #2a2a4e;
padding: 16px 24px;
display: flex;
gap: 8px;
}
.code-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.code-dot.red { background: #ff5f56; }
.code-dot.yellow { background: #ffbd2e; }
.code-dot.green { background: #27c93f; }
.code-body {
padding: 40px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 24px;
line-height: 1.8;
color: #a5d6ff;
}
.code-keyword { color: #ff79c6; }
.code-string { color: #f1fa8c; }
.code-comment { color: #6272a4; }
/* 场景4：结尾 */
.scene4 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cta-title {
font-size: 64px;
color: #fff;
font-weight: 700;
margin-bottom: 32px;
text-align: center;
}
.cta-url {
font-size: 36px;
color: #00ccff;
font-family: monospace;
padding: 20px 48px;
border: 2px solid #00ccff;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="stage"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-duration="15">
<!– 背景层 –>
<div class="bg-grid" data-start="0" data-duration="15"></div>
<div class="bg-glow" data-start="0" data-duration="15"></div>
<!– 场景1：开场 (0-3s) –>
<div class="scene1" data-start="0" data-duration="3">
<div class="logo">HyperFrames</div>
<div class="tagline">用 HTML 写视频</div>
</div>
<!– 场景2：特性卡片 (3-7s) –>
<div class="scene2" data-start="3" data-duration="4">
<h2 class="section-title">为什么选择 HyperFrames？</h2>
<div class="features">
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3 class="feature-title">熟悉的技术栈</h3>
<p class="feature-desc">HTML / CSS / JS<br>前端开发者零学习成本</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3 class="feature-title">专业级动画</h3>
<p class="feature-desc">内置 GSAP 引擎<br>流畅的动画效果</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3 class="feature-title">AI 原生</h3>
<p class="feature-desc">为 Agent 设计<br>自然语言生成视频</p>
</div>
</div>
</div>
<!– 场景3：代码示例 (7-11s) –>
<div class="scene3" data-start="7" data-duration="4">
<h2 class="section-title">写代码，出视频</h2>
<div class="code-window">
<div class="code-header">
<div class="code-dot red"></div>
<div class="code-dot yellow"></div>
<div class="code-dot green"></div>
</div>
<div class="code-body">
<span class="code-comment">// 创建时间轴</span><br>
<span class="code-keyword">const</span> tl = gsap.<span class="code-keyword">timeline</span>({ <span class="code-string">paused</span>: <span class="code-keyword">true</span> });<br>
<br>
tl.<span class="code-keyword">from</span>(<span class="code-string">".title"</span>, {<br>
x: –<span class="code-string">200</span>,<br>
opacity: <span class="code-string">0</span>,<br>
duration: <span class="code-string">1</span><br>
}, <span class="code-string">0</span>);<br>
<br>
<span class="code-comment">// 渲染成 MP4</span><br>
<span class="code-comment">// npx hyperframes render</span>
</div>
</div>
</div>
<!– 场景4：结尾 (11-15s) –>
<div class="scene4" data-start="11" data-duration="4">
<div class="cta-title">开始你的视频创作之旅</div>
<div class="cta-url">hyperframes.dev</div>
</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// 场景1：开场动画 (0-3s)
tl.from(".logo", {
y: 50,
opacity: 0,
duration: 1,
ease: "power4.out"
}, 0.2);
tl.from(".tagline", {
y: 30,
opacity: 0,
duration: 0.8,
ease: "power3.out"
}, 0.8);
// 场景1淡出
tl.to(".scene1", {
opacity: 0,
duration: 0.5
}, 2.5);
// 场景2：特性卡片 (3-7s)
tl.from(".section-title", {
y: 40,
opacity: 0,
duration: 0.8,
ease: "power3.out"
}, 3.2);
tl.from(".feature-card", {
y: 60,
opacity: 0,
duration: 0.6,
stagger: 0.2,
ease: "back.out(1.5)"
}, 3.8);
// 场景2淡出
tl.to(".scene2", {
opacity: 0,
duration: 0.5
}, 6.5);
// 场景3：代码示例 (7-11s)
tl.from(".scene3 .section-title", {
y: 40,
opacity: 0,
duration: 0.8,
ease: "power3.out"
}, 7.2);
tl.from(".code-window", {
scale: 0.9,
opacity: 0,
duration: 0.8,
ease: "back.out(1.5)"
}, 7.6);
// 场景3淡出
tl.to(".scene3", {
opacity: 0,
duration: 0.5
}, 10.5);
// 场景4：结尾 (11-15s)
tl.from(".cta-title", {
y: 50,
opacity: 0,
duration: 1,
ease: "power4.out"
}, 11.3);
tl.from(".cta-url", {
scale: 0.8,
opacity: 0,
duration: 0.8,
ease: "back.out(1.7)"
}, 12.2);
// 注册时间轴
window.__timelines = [tl];
</script>
</body>
</html>
9.4 预览调试
npx hyperframes preview
打开浏览器，拖动时间轴检查每个场景的动画效果。
需要调整的地方：
- 动画的 timing 是否自然
- 元素的位置是否对齐
- 转场是否流畅
9.5 渲染导出
npx hyperframes render –fps 30 –quality high -o product-demo.mp4
等待渲染完成，你就得到了一个 15 秒的专业级产品介绍视频。
十、总结与展望
10.1 HyperFrames 的核心优势
10.2 适用场景
- ✅ 产品介绍视频：科技感、数据展示
- ✅ 数据可视化视频：动态图表、数据故事
- ✅ 知识科普视频：文字+动画的讲解视频
- ✅ 社交媒体短视频：批量生成短视频内容
- ✅ 片头片尾：统一品牌视觉的视频模板
- ❌ 真人实拍视频：不适合处理真实拍摄素材
- ❌ 复杂 3D 动画：虽然支持 Three.js，但不是最优解
- ❌ 电影级特效：定位不是专业影视后期
10.3 未来展望
HyperFrames 还很年轻，但它代表了一个重要的趋势：视频创作的代码化、AI 化。
随着 AI Agent 能力的增强，未来可能会出现这样的工作流：
整个过程可能只需要几分钟。
10.4 学习资源
- 官方 GitHub：https://github.com/heygen-com/hyperframes
- 官方文档：https://hyperframes.dev/docs
- 示例库：官方仓库的 examples 目录
写在最后
HyperFrames 不是要取代专业的视频剪辑软件，而是开辟了一条新的路径——用代码的方式做视频。
对于前端开发者来说，这是一个让人兴奋的方向。你已经掌握的 HTML/CSS/JS 技能，现在可以用来创作视频了。
对于内容创作者来说，这意味着视频生产的效率可能会有数量级的提升。当 AI 能直接写视频代码，「批量生产高质量视频」就不再是梦想。
技术的发展总是这样：把曾经专业、昂贵、复杂的东西，变得简单、平民、可及。
HyperFrames 可能还不够完美，但它指向的方向，值得每一个创作者关注。
如果这篇文章对你有帮助，欢迎点赞、转发。
你想用 HyperFrames 做什么样的视频？欢迎在评论区聊聊。
