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

【视频展示区】
[此处插入 20s 演示视频 / 视频号链接]
（建议宽度 1080，比例 16:9，控制在 20s 内）

（视频由本项目源码渲染，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 种糖果色

# 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：三档字体

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

三件套 3：cqw 容器单位

.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 逛 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% 间距。命令的逐行滑入 + 颜色高亮让"一行命令出片"看着真有"在输入"的感觉。

# 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：

// 步骤整体（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 按钮）：

npx hyperframes add tiktok-follow

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

组件自带 4 段动画：

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

复用方法：

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

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

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

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

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

九、一行命令出片

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

或直接用 npx：

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。

十一、完整复现路径

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

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

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

官方模板库：https://www.hyperframes.dev/design
仓库地址：github.com/heygen-com/hyperframes

福利时刻

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

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

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

📄 文档管理系统