laser1209/aerie-yunqi/hyperframes

HyperFrames 视频合成（hyperframes）

当你要用 HTML 加 HyperFrames 把画面、动画、字幕、配音合成为一段视频时走这份流程。产出是一份可渲染的 composition（时间轴、场景、字幕、音频轨道）与渲染命令，而不是零散的动画片段。

铁律

1. 先定总时长与场景表再写内容：每个场景的起止时间、停留长度提前排好，动画和字幕才有参照，否则后期全靠挤。
2. 时间以秒为唯一基准对齐：场景切换、字幕出入、配音起播都用同一套时间，避免音画各处对不上。
3. 字幕与语音同源：字幕文本要么来自转写结果，要么就是 TTS 的输入，文本与时间戳成对生成，不要字幕一套语音一套。
4. 动画服务于信息节奏：入场退场时长控制在 0.3~0.8s，别让花哨动效盖过内容本身。
5. 音频先做后配：先生成或拿到配音并转写出时间戳，再让画面与字幕去对齐它，反过来做会反复返工。
6. 渲染前先预览：确认时间轴对齐、字号可读、配色对比足够，再走渲染，避免白跑一遍编码。

步骤

1. 写场景表：列出每个场景的主题、时长、画面元素。
2. 排总时间轴：把场景首尾相接铺成一条时间线，算出总时长。
3. 准备素材：配音（TTS）、字幕文本与时间戳、需要的图片与背景，先到位。
4. 写 composition：按时间轴摆好各元素的位置与动画，标注每个动画的起止时间。
5. 对齐字幕：把带时间戳的字幕挂到对应时间点，逐条核对与语音是否同步。
6. 加音画联动：需要节拍感时，让画面动效跟随音频能量或节拍点。
7. 预览定稿再渲染：确认无误后执行渲染，导出视频文件。

输出形态

## 场景表
| # | 时长 | 画面 | 字幕 |
| 1 | 5s | 标题 + LOGO | "…" |
 
## 时间轴
- 0.0~5.0 场景1  - 5.0~… 场景2  → 总长 30s
 
## 音频
- 配音：TTS(voice=…)  时长 28.6s
- 字幕时间戳来源：whisper 转写
 
## 渲染
- 命令 / 输出：out/video.mp4

反面例子（不要这样）

• 没排好时间轴就开写动画，最后靠疯狂裁剪凑时长。
• 字幕手打的时间与配音对不上，全程错位。
• 动效炫技盖过信息，观众只记得转场不记得内容。
• 不预览直接渲染，导出后才发现字号太小。