HyperFrames Presentation Template

参数化 HTML 视频演示模板，基于 HyperFrames 构建。

目录结构

hf-presentation-template/
├── config.json              ← 所有内容配置
├── scripts/
│   ├── generate.py          ← 生成 index.html
│   └── render.sh            ← 渲染 MP4
├── assets/
│   ├── illustrations/       ← 场景插图 (PNG)
│   ├── audio/               ← TTS 旁白 (vo-01.mp3 ~ vo-XX.mp3)
│   └── Music/               ← 背景音乐
├── index.html               ← 生成的 HTML（不要手动编辑）
└── README.md

使用流程

1. 编辑 config.json

{
  "meta": {
    "compositionId": "my-presentation",
    "title": "演示标题",
    "width": 1920,
    "height": 1080,
    "fps": 30
  },
  "design": {
    "accent": "#2c7be5",
    "fontFamily": "'Segoe UI', Arial, sans-serif"
  },
  "scenes": [
    {
      "label": "章节标签",
      "title": "场景标题 <em>高亮文字</em>",
      "image": "assets/illustrations/01.png",
      "keywords": ["关键词1 <em>高亮</em>", "关键词2"],
      "narration": "旁白文字，会自动分行显示为字幕。",
      "status": "状态标签"
    }
  ]
}

2. 生成 HTML

python scripts/generate.py

3. 预览

浏览器打开 index.html，点击页面开始播放。

4. 生成 TTS 旁白

使用 MiMo TTS 或其他工具为每个场景生成 assets/audio/vo-01.mp3 ~ vo-XX.mp3。

5. 渲染 MP4

# 使用 HyperFrames CLI
npx hyperframes render --output output.mp4

# 或使用 puppeteer + FFmpeg
node scripts/render.mjs

config.json 完整字段

字段	说明	默认值
meta.compositionId	HyperFrames 作品 ID	my-presentation
meta.title	页面标题	Presentation
meta.width / height	画布尺寸	1920×1080
meta.fps	帧率	30
design.*	颜色和字体	见 config.json
titleCard.duration	封面停留时间	6.5
audio.backgroundMusic	背景音乐路径	—
audio.musicVolume	音乐音量	0.08
audio.musicDuckVolume	旁白时音乐音量	0.03
scenes[].label	章节标签	—
scenes[].title	场景标题（支持 <em>）	—
scenes[].image	插图路径	—
scenes[].keywords	关键词数组（支持 <em>）	—
scenes[].narration	旁白文字	—
scenes[].status	状态标签	—

设计风格

• 瑞士网格风格（Swiss Grid）
• 42% 左侧文字 + 58% 右侧插图
• 封面 → 细节双阶段布局
• 关键词逐个切入，字幕逐句显示
• GSAP 动画，HyperFrames 兼容