動態標題生成
一段 6 秒、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 · Out now |
metaLeft | 頁尾，左側。用幾個字說明這是什麼。 | 60 | Release notes · 14 fixes |
metaRight | 頁尾，右側。通常是 URL 或帳號。 | 40 | relay.example/changelog |
寫作提示：
- 第 1 行和第 2 行共用頂部行，因此它們應一起讀起來像是一個片語的開頭（"Ship / it"、"Notes / that"、"Meet / the"）。第 3 行完成它。
- 全部使用大寫字母。單字效果最好；第 3 行可以是兩個短字。
- 保持
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，因為第 2 行會用它繪製。check 會測量兩者，並告訴你是否有任何一個失敗。
3. 建立專案並套用簡要資訊
cp -r <skill>/template ./title-drop
cd title-drop
在專案中寫入 brief.json，包含步驟 1 和 2 的欄位：
{
"line1": "Ship",
"line2": "it",
"line3": "today.",
"chip": "v2.0 · Out now",
"metaLeft": "Release notes · 14 fixes · 3 new features",
"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：此技能使用的第三方軟體。