快速入门
发布视频
HeyGen 产品发布视频背后的开源 HyperFrames 合成——真实的生产项目，你可以阅读、运行和二次创作。
HeyGen 团队使用 HyperFrames 构建其发布视频。每个合成——包括最初的 HyperFrames 公告、时间轴编辑器揭幕和网站转视频演示——都存放在一个公开仓库中，你可以阅读、运行和二次创作。
- hyperframes-launches HeyGen 产品发布视频背后的开源 HyperFrames 合成。
想先浏览成品视频？请从展示作品开始。本页面是这些发布项目的更深入制作文档。
内容概览
每个子目录都是一个独立的 HyperFrames 项目——包含 index.html、compositions/、assets/ 以及可供对比的渲染输出：
| 项目 | 展示内容 | 源码 |
|---|---|---|
| HyperFrames 发布 | 最初的发布视频——49.7 秒，玻璃框架开场，CSS / GSAP / Lottie / 着色器 / Three.js 弹性段落，完整叙事弧线。 | hyperframes-launch/ |
| 网站转 HyperFrames | 网站转视频工作流的配套项目——捕获网站并为其添加动画。 | website-to-hyperframes/ |
| 时间轴编辑器发布 | HyperFrames 时间轴编辑器的 60 fps 揭幕视频：音效冷开场、微调提示的聊天螺旋动画、编辑器揭幕。 | timeline-launch/ |
| 纹理发布 | 纹理遮罩文字 + 着色器驱动背景，用作发布预告。 | texture-launch-video/ |
| VFX x HeyGen 联合 | 多幕视频，将 VFX 文字光标场景与 HeyGen iPhone canvas 测试串联——可作为将两个现有项目合并为一次渲染的参考。 | vfx-heygen-combined/ |
分镜（STORYBOARD.md）、设计笔记（DESIGN.md）和交接文档（HANDOFF.md）与源码并排放置，因此你不仅能看到代码，还能看到制作思路：配音方向、节拍时序、色彩/风格决策。结构遵循 Hyperframes 流水线，其中详细记录了每个产物。
为什么这些项目有价值
这些不是玩具示例。它们与 HeyGen 在公开发布视频中使用的合成完全相同，按照真实生产工作的结构组织：
- 多合成项目。 大多数发布视频由 4-8 个子合成为一个根时间轴——当你的
npx hyperframes init --example入门项目需要超出单个文件时非常有用。 - 真实的适配器组合。 GSAP 时间轴、Lottie 动画、自定义着色器、Three.js 场景和 CSS 关键帧共存于一次渲染中。看看团队如何在单个合成中启动多个适配器。
- 生产级时序。 ElevenLabs 配音 + 逐拍音效 + 背景音乐与帧精确运动的混音。分镜描述了时序决策；源码展示了它们的执行。
- 无专有插件。 所有内容都使用你本地的
hyperframes render渲染——没有内部专用的引擎分支。
克隆
该仓库使用 Git LFS 管理视频、音频、图片和字体资产：
brew install git-lfs # macOS — or your platform's git-lfs install
git lfs install
git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches/hyperframes-launch
hyperframes preview # opens the studio for that launch
如需只克隆源码（跳过大型 LFS 资产，按需拉取）：
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches
git lfs pull --include="hyperframes-launch/assets/*"