今天在 GitHub Trending 上看到一个有意思的项目：hyperframes-launches，它是 HeyGen 用自家的 HyperFrames 框架制作的一系列产品发布会视频的「源码仓库」。把一支支炫酷的发布视频拆解成可阅读、可复现的工程目录，这种「用代码做视频」的思路值得细看。

一、项目概述

hyperframes-launches 是 HeyGen 官方发布的示例合集（作品集），收录了他们用 HyperFrames 框架制作的多个产品发布会视频的完整工程源码。HyperFrames 是 HeyGen 推出的、以「代码/声明式」方式编排视频内容的框架；而本仓库正是它的实战样板库。

它主要解决的是：传统视频制作依赖时间轴与 GUI 软件，难以版本化、复用与协作。HyperFrames 把镜头、素材、合成、渲染流程全部工程化，让视频可以像代码一样被 Git 管理、被程序生成、被自动化流水线产出。

核心特性：

  • 每个发布会都是一个独立子目录（composition），开箱即用。仓库共收录 16 个示例，包括 HF HeyGen × Stripe、Claude paper launch、Cloud Render launch、Figma integration launch、Frame.md storyboard launch、HyperFrames launch、Inspector launch、Kimi K3 promo、PR-to-video launch、SFX music launch、SpaceX launch、Texture launch video、Timeline editor launch、Variables launch、VFX HeyGen combined、Website → HyperFrames demo。
  • 浏览器直接预览：打开子目录下的 index.html 即可在浏览器查看、预览或渲染，无需安装重型软件。
  • 声明式工程结构：index.html + compositions/ + assets/ + renders/ + STORYBOARD.md + meta.json。
  • Git LFS 管理二进制资产：视频、音频、图片、字体走 LFS，HTML/CSS/JS/JSON/Markdown 按普通文本入库，兼顾仓库轻量与素材完整。
  • 可二次创作（remix）：基于已有工程替换素材、调整合成，快速产出变体视频。

二、技术原理

架构设计：以「合成（composition）」为最小单元。顶层 index.html 作为入口，引用 compositions/ 下的分镜级合成，组合成完整视频。

核心技术栈与选型理由：

  • 声明式描述：用 HTML/JSON 描述镜头、元素、动画与转场，而不是手工拖拽时间轴——这让视频结构可被程序读取、可被 diff。
  • 浏览器即渲染引擎：借助浏览器（或 HyperFrames CLI）作为渲染器，大幅降低本地环境门槛。
  • 资产分离存储：文本进 Git，二进制进 Git LFS，避免仓库体积失控。

关键设计：

  • STORYBOARD.md：逐镜头（shot-by-shot）的分镜计划，使「视频脚本」也可读、可审、可版本对比。
  • meta.json：工程元数据，供 CLI / 渲染器读取。

数据流：素材（assets/，LFS）→ 合成（compositions/）→ 顶层 index.html 编排 → 浏览器 / CLI 渲染 → 成品（renders/，LFS 的 mp4）。从源码到成品全程可追溯、可复现。

三、安装与快速开始

环境要求：Git 与 Git LFS。macOS 上：

# 一键安装 Git LFS
brew install git-lfs     # macOS
git lfs install

完整克隆（自动下载 LFS 资产）：

git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches

仅克隆文本、按需拉取素材（仓库体积主要来自视频，建议按需取用）：

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/*"   # 只拉某一支视频的素材

如果忘了先装 LFS 就克隆了，也无需重新克隆，事后补拉即可：

git lfs pull

四、使用方法与实战

预览/渲染单个发布会：进入对应子目录，用 HyperFrames CLI 打开 studio 或直接用浏览器打开 index.html：

cd hyperframes-launch
hyperframes preview     # 打开 studio 预览
hyperframes render      # 渲染为 mp4

新增一个发布会视频：

mkdir my-launch && cd my-launch && hyperframes init
# 1. 组装 composition
# 2. 提交时，根目录 .gitattributes 会自动让 LFS 接管二进制资产
# 3. 在 README 的 Videos 表中补一行

实战示例：想在 spacex-launch 基础上改文案、换素材做一支变体视频，只需复制该子目录、替换 assets/ 下的素材、微调 compositions/，再执行 hyperframes render 即可，无需从零搭建。

五、常见问题与解决方案

  • 克隆后视频/音频无法播放（仓库看着很大却看不到素材）：多半是未装 Git LFS 或克隆时跳过了 LFS。解决：安装 git-lfs 后执行 git lfs install，再 git lfs pull。
  • 只想快速看某个发布会，却要下载全部大素材：用 GIT_LFS_SKIP_SMUDGE=1 克隆，仅 git lfs pull --include="<子目录>/assets/*" 拉取所需部分，省时省带宽。
  • hyperframes render 报错找不到命令：浏览器可直接预览，但渲染需要 HyperFrames CLI，详见底层框架 heygen-com/hyperframes。
  • 仓库体积过大：源码文本很小，体积主要来自 LFS 资产；按需拉取（--include）是常规优化手段。

六、总结

hyperframes-launches 展示了一种「视频即代码」的工作流：分镜可 diff、素材走 LFS、成品可复现、工程可 remix。对于需要高频产出发布会 / 产品宣传视频、又希望流程可版本化、可协作的团队，这种「声明式描述 + 浏览器渲染 + Git LFS」的组合极具参考价值。如果想进一步掌控合成与渲染细节，建议深入其底层框架 heygen-com/hyperframes。