Hyperframes HTML 预览的 5 个神技：别再傻等导出了

大家好，我是程序员晚枫。

用 Hyperframes 做视频，很多人第一步就走错了——

每次改一点，就要 npx hyperframes render 导出，等半天，看一眼，不满意，再改，再等。

我之前就是这么干的。熬了两天晚上，终于把 Hyperframes 的 HTML 预览技巧全部摸透了。

血的教训：一定要用 HTML 预览来迭代，导出只留到最后一步。 不用这些技巧，你每次改文案、调动画、等导出这个过程能把你熬秃。

一、先搞清楚：Hyperframes 有两层预览

Hyperframes 自带两套预览系统，很多人以为只有「导出 MP4」这一条路：

预览方式	速度	适合场景
HTML 浏览器预览（`npx hyperframes preview`）	⚡ 秒级热重载	改文案、调动画、看整体效果
导出 MP4（`npx hyperframes render`）	🐢 分钟级	最终交付、分享

核心原则：HTML 能看到的，不要去导出。导出只做最后一步。

二、神技 1：`npx hyperframes preview` 浏览器 Studio

这是 Hyperframes 最强大的功能，但你可能还不知道它有多好用。

1	npx hyperframes preview

运行之后，浏览器自动打开 http://localhost:3002，看到的是一个完整的 NLE 风格编辑器：

左侧：组合列表（composition tree）
中央：<hyperframes-player> 实时预览 + 多轨时间线
右侧：属性面板（可以改元素的样式）
底部：渲染队列

源码编辑器支持 applyPatchByTarget 精确编辑，文件变更后 300ms 去抖，然后自动热重载——你甚至不用切出去看，保存即更新。

这是第一个神技：改 HTML → 浏览器秒级刷新 → 不满意继续改 → 满意了再导出。整个迭代过程从「几分钟等一次」变成「几秒看一次」。

分享给同事的小技巧

你把项目做完，想让同事帮忙看效果，不要发 index.html 给他，直接发：

1	http://localhost:3002/#project/<项目名>

这样对方打开的就是 Studio 预览界面，能拖时间线、能改参数，比发源文件强一百倍。

三、神技 2：先 `lint`，再 `preview`，最后才 `render`

我之前不知道这一步，吃了大亏。

# 1. 先检查代码有没有硬伤（30 条规则）
npx hyperframes lint

# 2. 再看视觉效果有没有翻车
npx hyperframes inspect

# 3. 最后才打开浏览器预览
npx hyperframes preview

# 4. 确认完美了，才导出
npx hyperframes render

为什么要先 lint？

Hyperframes 有 30 条 Lint 规则，会主动检测：

Math.random()、Date.now()、new Date()、performance.now() 等不确定性代码
缺少 data-composition-id
轨道（track）重叠
未注册的 GSAP timeline

如果你先 render 后才发现这些问题，等于白渲染了。

为什么要先 inspect？

inspect 会把视频从头到尾每个关键帧都截一张图，然后告诉你：

文字有没有溢出气泡 / 容器
元素有没有被截断
字幕有没有跑出画面

这些在 HTML 预览里可能看不出（预览窗口小），但导出后问题全暴露了。

inspect 默认采样 15 个关键帧，也可以指定帧：
1
npx hyperframes inspect --at 1.5,4,7.25

四、神技 3：Draft 质量快速迭代

当你还在调整动画节奏、文字内容、颜色搭配的时候，不要用 --quality high 导出。

# 普通质量，渲染快 3-4 倍
npx hyperframes render --quality draft

# 确认完全满意了，再用最终质量
npx hyperframes render --fps 60 --quality high

质量	渲染速度	适用阶段
`draft`	极快	反复迭代阶段
`standard`	正常	基本定稿
`high`	慢	最终交付

我之前每次改完都 --quality high，一次导出要 3-5 分钟，改 20 次就是 1 个小时没了。换成 draft 模式，10 秒出结果，改对了再用 high 导出，整个流程从 2 天缩短到 2 小时。

五、神技 4：分段渲染，锁定满意的部分

这个很多人不知道，但你一旦用了就回不去。

视频渲染过程中，如果某一段你已经很满意了，不想重新渲染，可以分段处理：

# 只渲染第 0~5 秒
npx hyperframes render --range 0 5 --output part1.mp4

# 只渲染第 5~10 秒
npx hyperframes render --range 5 10 --output part2.mp4

适用场景：视频有多个场景，前面的场景你调好了不想动，只想改后面某一段。用这个技巧，避免每次都从头渲染整个视频。

注意：需要你的 index.html 里各段的时间线是独立的（用 data-start 控制好起止时间）。

六、神技 5：善用 GSAP seek，不用等动画播放

这是最容易被忽视的技巧，也是效率提升最明显的一个。

在 Hyperframes 里，GSAP timeline 是可寻址（seekable） 的——你可以直接跳到任意时间点，看那一帧的样子。

1 2	// 直接跳到第 3 秒，看这个时间点的画面 gsap.seek(3);

好处：不用等动画从头跑到第 3 秒，1 毫秒就能看到结果。

在 Studio 的预览器里，时间线上的每一帧都是精确可算的（不是视频播放器那种"大概位置"），所以你调整动画曲线的时候，可以直接拖时间线滑块到目标帧，看元素位置对不对。

这跟 After Effects 的「停在某一帧看图层」是一样的概念——只不过你用的是代码和浏览器。

七、我的实际工作流

现在每次用 Hyperframes 做视频，我都按这个顺序走：

① npx hyperframes lint          # 先检查代码
     ↓ 发现问题，在这里修
     ↓ 没问题继续
② npx hyperframes inspect       # 看关键帧有没有翻车
     ↓ 发现问题，在这里修
     ↓ 没问题继续
③ npx hyperframes preview      # 打开 Studio，秒级热重载
     ↓ 在浏览器里反复调：
     ↓   - 文案？直接改 HTML，保存即刷新
     ↓   - 颜色？改 CSS，立刻看到结果
     ↓   - 动画节奏？拖 GSAP 时间线
     ↓ 满意了
④ npx hyperframes render --quality draft    # draft 质量导出，看整体效果
     ↓ 满意了
⑤ npx hyperframes render --fps 60 --quality high   # 最终交付