编辑文档 - HyperFrames frame.md 三件套实战：20s 出一段糖果色视频

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

> **【视频展示区】**
> [此处插入 20s 演示视频 / 视频号链接]
> （建议宽度 1080，比例 16:9，控制在 20s 内）
>
> <video src="capsule-frame-pack.mp4" controls width="100%"></video>
>
> *（视频由本项目源码渲染，2.7 MB / 1080p / 20s，渲染命令见后文）*

---

最近做了一段 20s 的产品介绍视频，5 个场景、1 段 1080p MP4、2.7 MB。

整个流程跑完 18 分钟——其中 16 分钟写文字、调色、设计动画，2 分钟 `npx hyperframes render` 渲染出片。

这速度的关键是**所有设计决策都"文档在先"**：色值、字体、组件尺寸、动效时间——全部写在一份叫 `frame.md` 的文件里，AI 一次读懂，5 个分镜同时跟着变。

如果你已经在 HyperFrames 写过几次视频，会发现一个老问题：

> 第一个项目用紫色渐变，第二个用青色科技，第三个强行致敬 Notion 灰。三个项目放一起像三个团队做的。

根因是**没有一份"视频版 design system"**——design.md 是给浏览器看的，frame.md 才是给"镜头"看的。

---

## 一、frame.md 是什么：视频版设计 DNA

`frame.md` 是 HyperFrames 在 v0.6.71 之后扶正的文件——它在 `design.md` 基础上加上**视频特有的字段**。

读取优先级（HyperFrames 官方规范）：

```
frame.md  →  design.md  →  DESIGN.md
```

`frame.md` 永远胜出，小写，不区分平台（Linux 区分大小写但 frame.md 始终小写）。

**简单说**：design.md 回答"看起来什么样"（web 端），frame.md 回答"在镜头里看起来什么样"（视频端）。两者共享 token，但 frame.md 多 3 件事：

- 字号 14-16px → 60-120px（视频里要"中景镜头能看清"）
- 阴影 / 玻璃态 → 减弱或删除（视频画面噪声会淹没）
- 加 video-specific 字段：bloom 光晕、atmosphere 渐变、motion 时长

---

## 二、frame.md 三件套：色板 + 字体 + cqw 单位

`frame.md` 里真正起决定作用的是 3 样东西。其他字段（constraints / motion / atmosphere）都是围绕这三样做约束。

### 三件套 1：9 种糖果色

```yaml
# frame.md 的 colors 段（YAML frontmatter）
colors:
  cream:   "#F5F5F0"
  ink:     "#1A1A1A"
  coral:   "#E85D4E"
  lime:    "#C4D94E"
  lavender:"#C5B5E0"
  sky:     "#8BB4F7"
  violet:  "#A06CE8"
  yellow:  "#F2D160"
  peach:   "#F5B895"
  mint:    "#A8E6CF"
  shadow:  "rgba(26,26,26,0.08)"
```

### 三件套 2：三档字体

```yaml
typography:
  display: "Fraunces"        # 标题 / 大字衬线
  body:    "Inter"           # 正文 / 屏幕可读
  mono:    "JetBrains Mono"  # 终端 / 代码
```

### 三件套 3：cqw 容器单位

```css
.frame {
  container-type: size;       /* 启用 cqw */
  width: 1920px; height: 1080px;
}
h2 { font-size: 6.5cqw; }    /* 124.8px @ 1920w → 70.2px @ 1080w */
```

`cqw` 解决"为什么在 1920 看着好，缩到手机端糊了"的老问题。

**改一处主色或字体，5 个分镜同时跟着变**——这条规则让"换品牌色"从 30 分钟变成 3 秒。

---

## 三、先去官方模板库拿 frame pack

打开 [https://www.hyperframes.dev/design](https://www.hyperframes.dev/design) 逛 12 个官方模板（截至 2026-06-06 实际可访问数量），hover 预览动效。

我这次选的是 **Capsule**（"Round, soft, friendly"）：

- **配色明亮**：9 种糖果色 + 奶油色背景，**适合消费品 / APP 介绍**
- **衬线 + 无衬线对比**：Fraunces 标题 / Inter 正文
- **原子化程度高**：9999px 圆角 pill、2px 硬偏移投影，所有元素都"像一颗胶囊"

下载按钮："Download frame pack" → 解压得到：

```
capsule-frame-pack/
├── FRAME.md              # 视频设计 DNA
├── frame-showcase.html   # 设计稿预览
└── assets/
```

把 `FRAME.md` 改名为 `frame.md`（小写——HyperFrames 读取优先级 `frame.md → design.md → DESIGN.md`），丢到项目根目录。

> **注**：本项目源文件是 12 个官方模板之一的 Capsule 模板的衍生版本。完整文件结构见文末"完整复现路径"。

---

## 四、20s 视频长什么样

视频由 5 个场景拼接而成，**总时长 20s**，时间分配：

| 场景 | 起始 | 时长 | 内容形态 |
|------|------|------|----------|
| 1. Cover | 0s | 4s | h1 大字 + 6 个浮动 pill |
| 2. Why | 4s | 4s | 3 个数字牌（壹/贰/叁） |
| 3. How | 8s | 4.5s | 黑底 Terminal + 3 步骤 |
| 4. Follow | 12.5s | 4s | 视频号 mockup + 关注组件 |
| 5. Closing | 16.5s | 3.5s | 仓库地址打字机 |

**总时长 4 + 4 + 4.5 + 4 + 3.5 = 20s**。

**关键设计决策**：

- **5 场景形态完全不一样**：Cover 居中 / Why 数字牌 / How 终端 / Follow 手机 / Closing 居中——避免两个相邻场景用同一套排版
- **第 3 场景用 Terminal 风格**——一行 `npx hyperframes render` 跑完整个流程，比任何截图都有说服力
- **第 4 场景用关注组件**——`npx hyperframes add tiktok-follow` 一行命令，加一个仿视频号的 lower-third 关注组件
- **第 5 场景用打字机**——22 字符的 `heygen-com/hyperframes` 用 GSAP `onUpdate` 回调逐字显示，1.32s 跑完

---

## 五、Scene 3 终端（11 行命令简化展示）

Scene 3 是 11 行命令的 Terminal 风格，左侧 48% 宽度终端、右侧 33% 步骤卡片。终端和步骤之间留 11% 间距。命令的**逐行滑入 + 颜色高亮**让"一行命令出片"看着真有"在输入"的感觉。

```bash
# 1. 改色与字体
$ code frame.md              # frame.md 黄色高亮，光标闪烁
  → 改 9 种糖果色 / Fraunces → 任意 web 字体

# 2. 改每个分镜
$ code compositions/*.html   # 文件名蓝色高亮
  → 标题 / 卡片 / 字幕，全是 HTML，可读可改

# 3. 一行命令出片
$ npx hyperframes render     # 命令名黄色高亮
  ✓ Render complete · 2.0 MB · 18s
  ✓ capsule-frame-pack.mp4
```

**配色规则**：`$` 提示符 lime 绿、`frame.md` 黄色、`compositions/*.html` 蓝色、注释灰、输出灰白、底色 ink 黑。

**完整 11 行 HTML 终端代码**（含配色和光标动画）见本项目源码。

---

## 六、Scene 3 步骤的 5 层动画（简化展示）

右侧 3 个步骤（壹/贰/叁），每步做 4 层动画，3 步之间错开 0.5s：

```javascript
// 步骤整体（0.5s back.out）
tl.fromTo("#step-1", { x: 80, opacity: 0, scale: 0.85 },
  { x: 0, opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.4)" }, 1.0);
// 数字圆形（旋转 120° → 0°，0.5s back.out）
tl.fromTo("#num-1", { scale: 0, rotation: 120 },
  { scale: 1, rotation: 0, duration: 0.5, ease: "back.out(1.7)" }, 1.15);
// h3 标题（横向 0.35s）
tl.fromTo("#h3-1", { x: -25, opacity: 0 },
  { x: 0, opacity: 1, duration: 0.35, ease: "power2.out" }, 1.3);
// 描述文字（纵向 0.35s）
tl.fromTo("#x-1", { y: 15, opacity: 0 },
  { y: 0, opacity: 1, duration: 0.35, ease: "power2.out" }, 1.45);
```

**核心公式**：每步 4 层错开 0.15s，3 步之间再错开 0.5s。3.0s 起数字圆形呼吸（sine.inOut, yoyo x2，错开 0.3s），让画面"活着"。

**完整 12 个 tl.fromTo + 3 个 yoyo 呼吸 + 字幕条代码**见本项目源码。

---

## 七、Scene 4 关注组件（一行命令安装）

Scene 4 用的是 HyperFrames 官方组件库提供的 `tiktok-follow` 组件——**仿视频号 lower-third 关注条**（黑底圆角 + 头像 + 显示名 + Followers + Follow 按钮）：

```bash
npx hyperframes add tiktok-follow
```

安装后自动生成 `compositions/tiktok-follow.html`，scene4 通过 `<script src>` 引用。

组件自带 4 段动画：

1. 底部滑入（0.5s power2.out）
2. Follow 按钮按压（scale 1 → 0.95 → 1）
3. 颜色变 + "Following"（背景 → #FE2C55 视频号珊瑚红）
4. 滑出

**复用方法**：

```bash
npx hyperframes list        # 看所有可用组件
npx hyperframes add <name>   # 安装指定组件
```

复杂交互（按钮状态切换、点击反馈、滑入滑出）不用自己写，组件库帮你做对了。

---

## 八、Scene 5 仓库地址（打字机效果）

Scene 5 末尾的仓库地址用了 22 字符打字机效果（`heygen-com/hyperframes`），GSAP `onUpdate` 回调逐字显示：

```javascript
const target = "heygen-com/hyperframes";
const counter = { n: 0 };
tl.to(counter, {
  n: target.length,
  duration: target.length * 0.06,        // 22 × 0.06s = 1.32s
  ease: "none",
  onUpdate: () => {
    repoNameEl.textContent = target.slice(0, Math.floor(counter.n));
  }
}, 1.1);
// 光标 lime 绿色 0.8s 周期闪烁
tl.to(repoCaretEl, { opacity: 0, duration: 0.4, yoyo: true, repeat: 4 }, 1.1);
```

**全地址**：`github.com/heygen-com/hyperframes`

---

## 九、一行命令出片

```bash
npm install             # 装 hyperframes@0.6.56
npm run render          # 出片
```

或直接用 npx：

```bash
npx --yes hyperframes@0.6.56 render \
  --output capsule-frame-pack.mp4 \
  --quality draft \
  --fps 30
```

参数：

| 参数 | 作用 |
|------|------|
| `--quality draft` | 草稿质量，2-3 分钟出片 |
| `--quality high` | 高质量，10-15 分钟出片 |
| `--fps 30` | 30 帧/秒 |

**最终产物**：20s / 1920×1080 / **2.7 MB** / h264 + aac

---

## 十、这个流程可以复用到哪里

**AI 编程教程**。每个代码块直接渲染成 Terminal 风格的卡，比截图清晰 10 倍。改色 = 改 frame.md 一行。

**产品发布视频**。3 个数字牌（壹/贰/叁）讲核心卖点，比 PPT 截图生动。改色板 = 换品牌色。

**技术分享幻灯片**。每个场景是独立 HTML，复制粘贴就能改文字。改字体 = 改 frame.md 一行。

每一类都不需要重新学 AE、PR、Final Cut。

---

## 十一、完整复现路径

1. **打开** [https://www.hyperframes.dev/design](https://www.hyperframes.dev/design) 选一个模板（12 个官方模板）
2. **Download frame pack** → 解压得到 frame.md + 预览 HTML + assets
3. 把 `frame.md` 改小写丢到项目根目录
4. **复制本项目结构**：

```
   capsule-frame-pack/
   ├── frame.md                       # 设计 DNA（来自官方模板）
   ├── index.html                     # 主时间线（20s，5 个 scene 引用）
   ├── meta.json
   ├── package.json                   # devDependencies: hyperframes ^0.6.56
   ├── assets/
   │   ├── music.mp3                  # 背景音乐（相对路径）
   │   └── phone.jpg                  # Scene 4 视频号手机屏幕
   └── compositions/
       ├── scene1-cover.html          # 0-4s
       ├── scene2-pillar.html         # 4-8s
       ├── scene3-quote.html          # 8-12.5s
       ├── scene4-follow.html         # 12.5-16.5s
       └── scene5-closing.html        # 16.5-20s
   ```

5. 改 frame.md 的色板和字体（如果和品牌不一致）
6. 改各 scene 的标题、字幕、卡片文字
7. `npm install && npm run render` → MP4 落盘

**官方模板库**：[https://www.hyperframes.dev/design](https://www.hyperframes.dev/design)
**仓库地址**：`github.com/heygen-com/hyperframes`

---

## 福利时刻

回复「**模板视频**」获取本项目完整源码（含 `frame.md` + 5 个分镜 HTML + 渲染脚本 + assets），你只需：

1. 改色和字体
2. 改每帧的标题、字幕
3. 一行命令出片

复制一份试试，下次再剪视频，你不会再纠结 5 像素的按钮位置了。

摘要

标签多个标签用逗号分隔

分类