动感标题掉落

一个六秒、1920×1080 纯文字影片，分为三拍：

一个巨大的首个词以发丝细线划过开场，然后停放在左上角。
第二个词以轮廓形式掉落，然后用强调色填充。
一个收尾行从右侧甩入，带有运动模糊，一条强调色横线在其下方擦入。一个标签和页脚淡入，所有元素保持，然后干净地退出。

该模板是一个 HyperFrames 合成。你填写一份简报，脚本将其写入模板，HyperFrames 在本地检查并渲染 MP4。文本使用实际字体测量并填充至画面，因此短词和长词都能占据相同空间。

你需要准备

安装 Node.js 22 或更高版本，并将 FFmpeg 添加到 PATH。
HyperFrames 通过 npx 运行，固定在为此模板测试的版本：npx --yes [email protected]。
首次渲染会下载无头 Chrome。如果 render 提示缺少 Chrome，运行 npx --yes [email protected] browser ensure 一次。
需要网络访问 cdn.jsdelivr.net，用于向模板提供 GSAP。如果被屏蔽，请参阅故障排查。

此技能的文件夹是下面的 <skill>：即本 SKILL.md 所在的文件夹。

步骤

1. 获取文案

询问任何无法推断的信息。每个字段都有长度限制；超限时脚本会拒绝。

字段	说明	限制	示例
`line1`	第一个词。开始时巨大，然后置于左上角。	10	`Ship`
`line2`	第二个词。以轮廓掉落，然后用强调色填充。	6	`it`
`line3`	收尾行。最大的行，下方带有横线。	12	`today.`
`chip`	标签，位于右上角。版本、日期或状态。	24	`v2.0 · 现已推出`
`metaLeft`	页脚（左）。用几个词说明这是什么。	60	`发布说明 · 14 个修复`
`metaRight`	页脚（右）。通常是 URL 或用户名。	40	`relay.example/changelog`

写作提示：

line1 和 line2 共享顶行，因此它们应共同读作一个短语的开头（如“Ship / it”、“Notes / that”、“Meet / the”）。line3 完成它。
所有文本均设为全大写。单个词效果最佳；line3 可以是两个短词。
保持 line1 + line2 在约 12 个字符以内，否则顶行相对于收尾行会变小。
页脚停留约 2 秒，因此请保持其易于浏览。

2. 选择颜色

三种十六进制颜色：ground（背景）、ink（文字）和 accent（轮廓、填充、横线、标签）。如果有品牌色请使用，否则从预设中选择：

预设	ground	ink	accent
Ember	`#0f1013`	`#f5f4ef`	`#ff5b2e`
Fieldnote	`#f1ede4`	`#18201c`	`#2f6b4f`
Cobalt	`#0b1020`	`#eef1ff`	`#5b7cff`
Paper	`#fbfaf7`	`#111111`	`#e8462b`
Lime	`#101410`	`#f2f5ee`	`#b6f23a`

ink 需要与 ground 形成强对比；accent 与 ground 的对比度至少需要 3:1，因为 line2 会使用它绘制。check 会测量两者，并告知是否失败。

3. 创建项目并应用简报

cp -r <skill>/template ./title-drop
cd title-drop

在项目中写入 brief.json，包含步骤 1 和 2 中的字段：

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · 现已推出",
  "metaLeft": "发布说明 · 14 个修复 · 3 个新功能",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

然后将其写入模板：

node <skill>/scripts/apply-brief.mjs . brief.json

它会针对模板声明的变量（类型、长度、颜色格式）检查每个值，如果出现问题，会一次性列出所有问题。修复简报后再次运行。你可以省略某些字段以保留当前值。

两个完整的简报位于 <skill>/examples/ 中。

4. 检查

npx --yes [email protected] check --json

check 会 lint 文件、在浏览器中播放、随时间测量布局并测试对比度。如果 "ok": true 且无发现，则表示准备就绪。在渲染前修复任何发现。文案可能导致的发现：

contrast_aa_failure：颜色对比度不足。使用其提供的 suggestedColor，或选择更暗/更浅的颜色。
text_box_overflow、clipped_text 或 content_overlap：某个值比模板预期更长，通常是页脚或标签与其相邻元素重叠。请缩短它。

不要为了消除发现而更改模板结构。请修改简报。

5. 渲染前预览

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

这将 PNG 帧写入 snapshots/。打开并检查开场帧、第二个词落下的帧以及最终保持的帧。注意词是否与标签碰撞、页脚是否与横线重叠，或强调色在背景上是否不明显。

6. 渲染

npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4

项目的 package.json 中包含与 npm run check 和 npm run render 相同的命令。使用 --quality draft 进行快速测试，使用 --fps 60 可在社交媒体上获得更流畅的效果。

7. 交付

将 renders/title-drop.mp4 的路径和步骤 5 中的一张静态帧交付给需求方。告知他们如果需制作另一个版本，只需编辑 brief.json 并重新运行步骤 3 到 6。

时间映射

时间 (秒)	事件
0.00	`line1` 已显示在屏幕上，大号且居中，作为缩略图
0.00–0.42	强调色发丝细线划过，然后淡出
0.80–1.35	`line1` 移向左上角
1.35–1.77	`line2` 以轮廓形式掉落
1.90–2.06	`line2` 用强调色填充
2.05–2.55	`line3` 从右侧甩入
2.60–3.05	强调色横线在 `line3` 下方擦入
3.10–3.50	标签、页脚和角落标记淡入
3.50–5.45	保持
5.45–5.80	所有元素以短模糊效果向上退出

同时生成多个版本

要渲染多个变体（每个语言、产品或日期一个），编写一个简报 JSON 数组并一次性渲染。每个对象是一个完整或部分的简报，会与已应用的值合并：

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch 会按渲染设置变量，因此你无需对每个变体运行 apply-brief。输出路径需要占位符（如 {index} 或 {line3} 等字段），否则文件会互相覆盖。先对一份代表性简报运行 check，并通过快照查看最长的文案。

故障排查

渲染挂起，然后显示静态帧，或报告 sub_timeline_script_failure。 GSAP 未加载。如果网络阻止 cdn.jsdelivr.net，在项目中运行 npm i [email protected]，将 node_modules/gsap/dist/gsap.min.js 复制到 assets/vendor/，并将 index.html 中的 <script src> 指向 assets/vendor/gsap.min.js。
文字看起来字体不对。 模板使用 League Gothic 和 JetBrains Mono，HyperFrames 自带这些字体。如果更换字体，请使用其他捆绑字体族（npx hyperframes docs compositions 列出它们），或添加 @font-face，否则 check 会失败。
颜色未更改。 再次运行步骤 3 中的 apply-brief，并检查是否打印了 Applied N values。编辑 CSS :root 颜色无效；变量优先级更高。
想要不同时长？ 请保持 6 秒。各拍节拍已为该时间窗口设计；延长根时长只会延长保持阶段。

文件

template/：HyperFrames 项目（index.html、hyperframes.json、package.json）。
scripts/apply-brief.mjs：验证简报并将其写入模板。无依赖。
examples/relay-v2/ 和 examples/fieldnote-beta/：完成的简报。Lookbk 上的预览由其渲染。
NOTICE.md：此技能使用的第三方软件。

六秒动态标题成片