快速入门
展示作品
可以观看、阅读、运行和二次创作的 HyperFrames 视频成品。
README 介绍了 Hyperframes 是什么。本页面展示你可以用它构建什么。
下面的每个项目都是真实的 HyperFrames 合成，你可以查看源码、预览、渲染和二次创作。
想了解这些视频背后的制作笔记、仓库结构和克隆方式？请阅读发布视频。本页面是视觉展示；发布视频是更深入的拆解。
产品发布
<a class="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-950" href="https://www.hyperframes.dev/"
社区实验场
开放 · 二次创作 · 发布
使用 hyperframes.dev 预览社区项目、分享你的作品，并在浏览器中持续迭代。
深入了解
从用例出发
| 如果你想构建... | 从这里开始 | 原因 |
|---|---|---|
| 产品发布公告 | HyperFrames 发布 | 展示包含多种动画运行时的完整发布叙事。 |
| 网站转视频产品导览 | 网站转 HyperFrames | 展示捕获的网站素材、Agent 提示、字幕、配音和音效。 |
| 产品 UI 揭幕 | 时间轴编辑器发布 | 展示模型、界面特写和功能叙事。 |
| 纹理或标题卡系统 | 纹理发布 | 展示表现力丰富的文字处理和着色器驱动的运动效果。 |
| 重特效发布混剪 | VFX x HeyGen 联合 | 在一次渲染中融合 Three.js、生成媒体和 HTML-in-canvas。 |
| 入门项目 | 示例 | 使用 npx hyperframes init --example <name> 搭建可运行的模板。 |
| 可复用的动效组件 | 组件库 | 向现有合成添加组件和模块。 |
本地运行
这些发布项目使用 Git LFS 管理视频、音频、图片和字体资产。克隆前请先安装 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/website-to-hyperframes
npx hyperframes preview
npx hyperframes render
如需跳过预先下载所有发布资产，可以先克隆仓库，然后只拉取你要运行的项目：
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches
git lfs pull --include="website-to-hyperframes/**"
cd website-to-hyperframes
npx hyperframes preview
发布项目包含源 HTML、子合成、资产、渲染输出以及制作笔记（如 STORYBOARD.md、DESIGN.md 和 HANDOFF.md，视具体项目而定）。