HeyGen Hyperframes CLI：HTML 动效一把梭，直接出片

你有没有这种时刻：

• 做个小产品更新，想录个 60 秒科普
• 特效不复杂，但你不想开 AE
• 更不想“写脚本→录屏→剪辑→配音→对齐字幕”一套做完天都黑了

Hyperframes CLI 的思路很直接：你用纯 HTML/CSS/JS（配 GSAP、Lottie、Three.js 也行）把动效写出来，它负责把这个页面渲染成视频。而且还把常见的视频制作管线都包了：获取/渲染、编码、音频混合，外加一个可手动微调的编辑器 UI。

如果你之前用 Remotion 做视频，会明显感觉：这套更像“完整的成片系统”，不只是一个 React 渲染器。

说明：下面命令以“工作流长什么样”为主，具体参数和命令名以官方文档为准。别硬抄，照着思路搭就对了。

它到底解决了什么问题？

一句话：把“网页动效”变成“可交付的视频资产”。

你可以这样用它：

• 写一个 HTML 动画模板（带入参）
• 批量喂数据（标题、要点、价格、截图、头像）
• 一键渲染 1080p/4K 视频
• 需要真人出镜？再把视频接到出镜模型（例如 Seedance 2.0 这类）

结果就是：

• 你写一次模板，以后发更新视频就是“换数据”
• 做一条 1 分钟的讲解视频，能从“半天”压到“十几分钟”

你能用哪些前端动画框架？

Hyperframes 这点很爽：不绑死你。

常见组合都能塞进去：

• GSAP：时间轴动画、转场、缓动
• Lottie：设计师给你 JSON 动效，直接播
• CSS 动画：简单但稳定
• Three.js：3D 场景、粒子、镜头

这意味着什么？

你完全可以把它当作“AE 模板系统”的另一条路：用前端技术复刻主流 AE 特效模板。写起来还更好做参数化。

典型工作流：从 HTML 动效到视频

1）准备一个“可渲染的页面”

你需要一个页面入口，比如：

• index.html
• main.ts / main.js

页面里做两件事：

• 渲染画面（DOM / Canvas / WebGL）
• 控制时间轴（让它能按时间推进，而不是靠用户滚轮/鼠标）

一个很实用的约定：

• 把所有内容放在 #stage 容器
• 宽高固定（例如 1920×1080）
• 所有动画可由 progress 或 time 驱动

这样你后面渲染、批量、对齐音频都省心。

2）把动画写成“可参数化模板”

别把文字写死在页面里。

你要的是这种效果：

• 标题：${title}
• 3 个要点：${bullets[]}
• 头像：${avatarUrl}
• 产品截图：${imageUrl}

你可以用任意方式注入数据：

• URL query
• JSON 文件
• 环境变量
• 你自己写的模板引擎

建议你直接上 JSON。最稳。

示例（伪结构）：

{
  "title": "这次更新了什么？",
  "bullets": ["支持批量渲染", "新增字幕样式", "导出更快"],
  "avatarUrl": "./assets/avatar.jpg",
  "brandColor": "#6C5CE7"
}

3）渲染视频：把“网页播放”变成“逐帧输出”

你要的不是录屏。

是逐帧渲染 + 编码输出。清晰、稳定、不掉帧。

你会做的事情大概是：

• 指定入口页面
• 指定分辨率、帧率、时长
• 指定输出格式（H.264/ProRes 等）
• 指定音频（旁白、BGM）并混音

命令会长得像这样（示意）：

hyperframes render \
  --entry ./src/index.html \
  --data ./data/video-001.json \
  --width 1920 --height 1080 \
  --fps 30 --duration 12 \
  --audio ./audio/voice.mp3 \
  --bgm ./audio/bgm.mp3 \
  --out ./dist/video-001.mp4

你关心的指标：

• 颜色别发灰（色彩空间/编码参数）
• 字体别丢（字体嵌入/打包）
• 音频别炸（响度、削波）

Hyperframes 主打的就是把这些“视频工程活”也一起兜住。

批量渲染：做成“内容流水线”才是真爽

你一旦模板写好了，就别手动点来点去。

直接批量：

hyperframes render \
  --entry ./src/index.html \
  --data ./data/*.json \
  --out ./dist/

场景举例：

• 你要做 30 条功能更新短视频
• 每条就换标题、要点、截图
• 半小时后 dist 目录里躺着 30 个 mp4

这才叫“做内容像做代码”。😏

加上出镜：实现“零人工介入”的科普视频

你原文里提到的那条链路很关键：

1. Hyperframes 把视觉部分搞定（镜头、转场、字幕、图表、动效）
2. 旁白用 TTS 或你自己录
3. 再把成片接到出镜模型（把头像/人脸变成对口型讲解）

你就能得到一种离谱的结果：

• 你给一张照片 + 一段脚本
• 画面是模板自动生成
• 人像自动对口型讲解
• 你只需要最后抽查

如果你平时用 Claude Code 写脚本/整理要点，这条链路会更顺。

建议的自动化拆分：

• Claude 负责：脚本、分镜、要点提炼、生成 data.json
• Hyperframes 负责：画面渲染成 mp4
• 出镜模型负责：人物讲解版本

你就专心做一件事：让内容别胡说八道。

从 Remotion 迁移：怎么迁最省事

如果你已经用 Remotion：

• 动画逻辑很多在 React + timeline
• 输出流程可能要自己拼 ffmpeg、音频混合、资源管理

迁移时别一股脑重写。

更省心的策略：

• 把“组件化的画面”抽出来，先做成静态页面
• 用 GSAP 或你熟的方式重建时间轴
• 先做 1 个模板跑通“渲染 + 音频混合 + 输出”
• 确认清晰度、字体、颜色都稳定，再扩模板库

你会明显省掉很多“工程边角料”。

一个能直接照抄的模板结构（建议）

目录建议这样放：

project/
  src/
    index.html
    main.ts
    scenes/
    components/
  assets/
    fonts/
    images/
    lottie/
    audio/
  data/
    video-001.json
    video-002.json
  dist/

你做内容会越来越像“发版本”。

• data/ 是今天要发的 10 条视频
• src/ 是你的模板引擎
• dist/ 是交付物

避坑清单（真会踩的那种）

• 字体：本地能显示不代表渲染能用。把字体文件放进 assets，确保加载路径稳定。
• 资源加载时序：图片/JSON 没加载完就开演，渲染出来就是空白帧。做一个 preload，全部 ready 再开始时间轴。
• Canvas/Three.js 清晰度：注意 DPR、抗锯齿、纹理尺寸。别到导出才发现糊。
• 音频响度：BGM 别抢旁白。旁白 -14 LUFS 左右更耐听（具体看平台）。
• 动画可控性：别写成“靠 setTimeout 触发”。要能按时间推进，才能稳定逐帧渲染。
• 时长对齐：旁白变长了，画面要跟着延长。用数据驱动 duration，别手填。

你现在就能做的一个小练习（10 分钟见效）

目标：做一条 8 秒的“产品更新卡片”视频。

• 画面：标题 + 3 个要点 + LOGO
• 动效：淡入、要点逐条飞入
• 音频：加一段旁白（哪怕你随便录）

步骤：

• 用 GSAP 写 timeline
• data.json 填内容
• 渲染出 mp4

跑通这一条，你就知道这工具值不值得你继续投入了。

结语：它强在哪？

强在“把 HTML 动效做成视频”这件事不稀奇。

稀奇的是：它把成片所需的管线也一起端上来了。

你想做模板化内容、批量出视频、再接出镜模型，这套路线很顺。

如果你愿意，我也可以按你的内容类型（功能更新/科普/带货/课程）给你一套 data.json 规范 + 一个通用模板分镜，直接开干。