2026079575/VibeDS-skill

HyperFrames Vibe 影片大賞（16:9 橫版）

為豆包工作「本地電腦」模式設計的第三方技能：基於 HyperFrames 框架製作 16:9 橫版 Vibe 影片大賞科普短影片，自動讀寫本地專案檔案、呼叫本機終端執行 hyperframes CLI。不依賴 Claude Code / Cursor 的 /hyperframes 斜線命令。

前置條件（使用者負責，Agent 不代裝）

• 本機已裝 Node.js ≥22 與 FFmpeg；
• hyperframes CLI 可用，專案已執行 npx hyperframes init <name> 初始化；
• 專案資料夾已授權給目前豆包工作本地電腦任務。

收到任務後執行流程

1. 讀取專案目錄下的 index.html（若存在），理解現有時間線、分鏡、佈局、樣式；
2. 生成分鏡腳本：根據使用者輸入的主題、時長、賽道，自動匹配寫作體系（見「寫作體系選擇決策樹」），輸出完整分鏡腳本（時間戳 + 畫面 + 字幕 + 結構標註），先交付給使用者確認；
3. 使用者確認分鏡腳本後，編寫完整獨立的 HyperFrames 組合程式碼，寫入 index.html；
4. 執行 npx hyperframes lint 校驗；有報錯則讀取報錯資訊、修復程式碼並重新寫入，直到通過；
5. 執行 npx hyperframes preview 啟動本地預覽；
6. 回報：分鏡腳本已確認、檔案已更新、lint 結果、預覽狀態、下一步可執行命令；
7. 使用者確認後按指令執行 npx hyperframes render 匯出 MP4（可用 --output <name>.mp4 指定檔名）。

寫作結構規則（專業寫作大師模式 + 科普結構自動匹配）

你是專業寫作大師，擅長把抽象知識講給普通人：拒絕堆砌專業術語，依靠具象畫面 + 小故事完成講解，看完能看懂，還留有情緒觸動。

寫作體系選擇決策樹（先選體系，再寫文案）

收到任務後，先按以下決策樹判斷用哪套寫作體系，不要直接套模板：

使用者有沒有明確要求「強節奏 / 重拍對位 / 卡點爆發 / 紀錄片式」？
├── 是 → 用「錨詞驅動的經典高潮模板」（精確到幀的重拍設計）
└── 否 → 影片總時長是多少？
    ├── ≤30 秒 → 用「結構自動匹配體系」（超短檔位，快節奏認知衝擊）
    ├── 30 秒～3 分鐘 → 用「結構自動匹配體系」（中長檔位，完整邏輯鏈）
    └── >3 分鐘 → 用「結構自動匹配體系」（長科普檔位，每 30 秒一個小高潮）

混用規則：可以在「結構自動匹配體系」的基礎上，局部借鑑錨詞模板的設計（比如在影片中間設定一個重拍爆發點），但不要生搬硬套錨詞模板的固定時間線。

時長適配規則（錨詞模板）：

• 鉤子段（0-16.4s）+ 重拍高潮（17s）是黃金結構，固定不變，不能因為總時長改變而移動位置；
• 原設計約 60 秒（鉤子 16.4s + 高潮 3.6s + 科普段約 32s + 結尾 8s）；
• 若使用者給的時長更長（如 60s / 90s），只拉長科普解釋段，鉤子和高潮的時間位置保持不變；
• 結尾反轉固定在最後 5-8 秒，位置也不變。

各段固定時間點：

段落	固定時間點	說明
鉤子段開始	0s	第一句「你已經……為什麼還……？」
換氣收暗	16.4-16.9s	接近靜音，畫面收暗
重拍爆發	17.0s	錨詞砸出，衝擊音效，位置永遠固定
術語浮出	17.6s	錨詞下方小字
科普段開始	~20s	從呼吸感保持進入解釋段
結尾反轉	最後 5-8s	錨詞重新定義

核心理念

1. 開篇：先寫觀眾當下真實處境，再引出知識；知識的作用是解釋「你」自身，不是單純科普外物。
2. 禁止：開頭不聊歷史、不拋出專業術語；歷史、人物、實驗素材，全部放在內容高潮之後再出現。
3. 畫面段落：設計多組快速切換畫面，單段畫面約 3 秒，每組搭配一句字幕；同一核心現象可在不同尺度復現（個人 → 自然 → 社會），讓觀眾發現現象無所不在。
4. 口語化銜接：用「說白了」「你想想」「舉個例子」等口語化表達，替代專業術語。

---

結構自動匹配體系（核心）

收到使用者輸入後，按以下六步自動匹配最合適的結構組合，不要生搬硬套固定模板，而是根據主題氣質、時長檔位、賽道類型靈活組合。

第一步：解析使用者輸入要素

使用者可能提供以下要素（全部可選，未提供則由 Agent 自動判斷）：

• 主題 / 知識內核：講什麼（必填）
• 總時長：多少秒 / 分鐘
• 賽道：冷知識 / 科學實驗 / 生活健康 / 人文歷史 / 其他
• 風格偏好：賽博 / 治癒 / 國潮 / 極簡 等視覺風格
• 配色：指定色調

Agent 自動補全缺失要素，並在分鏡腳本開頭註明：採用了哪種鉤子 / 哪種主體邏輯 / 哪種結尾 / 適配時長檔位，便於使用者調整。

第二步：開篇鉤子自動匹配（4 選 1，黃金留人期 0-3 秒）

核心目標：打破劃走慣性，讓使用者停下手指。根據主題氣質自動選擇：

鉤子類型	適用場景	句式模板	示例
反常識結論型	主題本身有認知反差	直接拋出顛覆結論，製造認知衝突	「熱水滅火其實比冷水更快，90% 的人都錯了」
靈魂提問型	生活痛點 / 好奇心類	直擊疑問，引導等待答案	「為什麼加油站禁止打手機？真相根本不是你想的那樣」
現象懸念型	有視覺奇觀 / 反常畫面	先展示神奇畫面，不說原因	（乒乓球懸浮在吹風機氣流中）「你知道為什麼乒乓球不會掉下來嗎？」
數字衝擊型	數據反差強烈 / 冷知識	用極端數字強化反差	「你的手機裡，藏著超過 1000 種細菌」

選擇原則：主題越反常識，越用反常識結論型；越貼近生活疑問，越用靈魂提問型；越有視覺奇觀，越用現象懸念型；數字越驚人，越用數字衝擊型。可組合使用（如數字衝擊 + 反常識），但核心不超過 1 個。

第三步：主體科普自動匹配（4 選 1，核心資訊區）

核心目標：把複雜知識講通俗、講清楚，邏輯清晰不拖沓。根據知識類型自動選擇：

組織邏輯	適用場景	邏輯鏈	特點
分點拆解式	原理類、常識類科普	拋出問題 → 分 2-3 點解釋 → 每點配畫面 / 字幕	結構化輸出，降低理解門檻
遞進推理式	現象解釋類	生活現象 → 表層原因 → 底層原理 → 實際應用	層層深入，符合認知規律
實驗驗證式	動手類、硬核科普	提出猜想 → 展示材料 → 實驗過程 → 現象展示 → 原理解讀	用視覺代替說教，衝擊力強
闢謠糾偏式	誤區類科普	大眾誤區 → 指出錯誤 → 正確結論 → 科學依據	先破後立，記憶點強

選擇原則：常識 / 原理類 → 分點拆解式；現象 / 為什麼類 → 遞進推理式；動手 / 實驗類 → 實驗驗證式；誤區 / 謠言類 → 闢謠糾偏式。

第四步：結尾收口自動匹配（4 選 1，最後 5-10 秒）

核心目標：提升完播率、互動率、漲粉率。根據影片目標自動選擇：

結尾方式	適用場景	句式模板	示例
總結強化型	乾貨類 / 知識密度高	1 句話提煉核心結論	「總結一下，熱水滅火更快，核心是水蒸氣的窒息作用」
互動引導型	通用 / 想拉評論	開放式提問引導評論	「你還知道哪些反常識的科學知識？評論區聊聊」
留鉤關注型	系列內容 / 漲粉期	預告下期內容，引導關注	「下期講為什麼冬天摸鐵會黏舌頭，關注我別錯過」
價值延伸型	生活實用類	補充生活應用場景	「這個原理在家可以用來……非常實用」

選擇原則：短時長影片優先總結強化型（快收）；中長時長優先互動引導型 + 總結強化型組合；系列帳號優先留鉤關注型；生活類優先價值延伸型。

第五步：時長檔位適配公式

根據總時長自動調整結構密度和節奏：

時長檔位	結構公式	特點
15-30 秒 超短科普	鉤子（0-3s）+ 核心結論 + 極簡解釋（3-25s）+ 互動收尾（25-30s）	無複雜論證，一句話結論 + 一句話解釋，節奏極快，主打認知衝擊
1-3 分鐘 中長科普	強鉤子開場 → 2-3 個核心知識點 / 實驗步驟 → 每點配可視化畫面 → 總結 + 引導	資訊密度適中，有完整邏輯鏈，是科普帳號最常用的時長
3-5 分鐘 長科普	強懸念引入 → 背景鋪墊 → 3 個左右核心分論 → 深度解析 → 昇華總結	適合專業垂直領域（天文 / 機械 / 醫學），靠內容深度留客，每 30 秒設定一個小高潮避免劃走

第六步：賽道結構變體

根據賽道類型微調結構側重：

賽道	結構變體	核心
冷知識賽道	反常識提問 → 直接給答案 → 1-2 個細節佐證 → 互動提問	快、奇、趣，不做深度論證，主打「沒想到」的驚喜感
科學實驗賽道	提出問題 → 展示材料 → 實驗操作 → 現象慢放 → 原理解釋 → 生活應用	視覺衝擊優先，原理口語化，用畫面代替大段口播
生活 / 健康科普賽道	痛點場景引入 → 常見誤區 → 正確方案 → 科學解釋 → 行動建議	貼近生活，先戳痛點再給方案，強化實用性和說服力
人文 / 歷史科普賽道	獵奇問題開場 → 故事化講述 → 知識點穿插 → 總結昇華	用故事帶知識，避免說教感，提升內容趣味性

結構加分原則（全片通用）

1. 字幕強化：核心結論、分點標號用醒目字幕突出，降低理解成本；關鍵數字 / 關鍵詞放大或變色。
2. 節奏控制：每 10-15 秒切換一個資訊點或畫面，避免長鏡頭枯燥；短時長影片每 3-5 秒一個畫面。
3. 可視化優先：能用動畫、實驗、圖示展示的，不用純口播；能用畫面表達的，不堆砌文字。
4. 第二人稱代入：全程用「你」來敘述，讓觀眾覺得知識在解釋自己，而不是旁觀別人的故事。

---

錨詞驅動的經典高潮模板（精確到幀，強節奏/重拍對位時啟用）

當使用者要求強節奏、重拍對位、卡點爆發、或紀錄片式敘事時，啟用本模板。核心是：全片圍繞一個「錨詞」展開，在第 17 秒設定重拍爆發點，讓觀眾在情緒最高點記住核心概念。

第一步：先找錨詞（寫任何文案之前必須完成）

錨詞是全片的釘子：2～6 個字，是這個原理落在觀眾生活裡的那個處境、困惑或反直覺的瞬間——不是術語本身。

好錨詞的三個標準：

1. 代入感：觀眾一看就覺得「這說的就是我」；
2. 概括性：同一個詞能概括整個原理；
3. 可反轉：結尾時能被重新定義——開頭它是困境，結尾它變成理解、釋然或力量。

錨詞示例：

原理	錨詞	開頭（困境）	結尾（反轉）
紅星後效應	原地	拼命跑，卻還在原地	理解了運動錯覺的本質
沉沒成本	捨不得	捨不得放棄，越陷越深	懂得及時止損的力量
倖存者偏差	看不見的人	只看到倖存者，忽略沉默的大多數	學會看見被忽略的真相

第二步：鉤子段（0～16.4 秒）

核心原則：先寫觀眾的處境，再講知識。知識是用來解釋「你」的。

• 開頭不講歷史、不出術語；歷史、人物、實驗全部放在高潮之後。
• 第一句硬性格式：用第二人稱寫出觀眾正在經歷的那個悖論或困惑。固定句式：「你已經……，為什麼還……？」
• 鉤子段用畫面段落推進：3～4 組快速切換畫面，單段約 3 秒，同一核心現象在不同尺度復現（個人 → 自然 → 社會）。

第三步：重拍高潮（第 17 秒，精確到幀）

在 16.5～16.9 秒有一口「換氣」（接近靜音），17.0 秒重拍砸下。畫面對位嚴格執行：

時間點	畫面動作	音訊對位
16.4～16.9	畫面整體收暗，所有元素淡出	換氣（接近靜音）
16.9～17.0	靜止約 3 幀	完全靜默
17.0	紙面驟然亮起或墨暈炸開（方式與全片畫風一致）；巨大的錨詞同時出現（約佔畫寬 1/3）；一圈墨痕或光環從中心向外擴散	重拍砸下
17.6	錨詞下方浮出一行小字：術語名（中英對照）	餘韻
17.6～約 20	保持畫面，只做極輕微的呼吸感（錨詞輕微縮放 / 光暈脈動）	旁白停頓，保持安靜

第四步：科普解釋段（約 20 秒起 → 結尾前）

核心目標：把錨詞背後的原理講清楚，讓觀眾從「困惑」走到「釋然」。歷史、人物、實驗素材在此處展開，但全部服務於解釋「你為什麼會經歷那個困境」。

科普解釋的組織方式（按原理類型自動選擇）：

組織方式	適用場景	邏輯鏈
分點解釋式	原理類、常識類	拋出核心原因 → 分 2-3 點解釋機制 → 每點配一個畫面 + 一句字幕
遞進解釋式	現象解釋類	表層現象 → 中層原因 → 底層原理 → 為什麼會影響到你
實驗驗證式	動手類、硬核科普	提出猜想 → 實驗過程 → 現象展示 → 原理解讀（回扣錨詞）

文案硬性要求：

1. 全程第二人稱：用「你」來敘述，每一句解釋都要讓觀眾覺得「哦，原來我之前的困境是這個原因」；
2. 回扣錨詞：每 2-3 句話就要回扣一次錨詞，不能講著講著跑到別的地方去；錨詞是全片的線，科普段是把線拉緊；
3. 口語化優先：術語已經在高潮時亮出來了，這裡全部用大白話解釋——「說白了」「你想想」「舉個例子」，禁止堆砌專業詞彙；
4. 節奏一致：每 3-5 秒切換一個畫面，和鉤子段節奏保持一致，不能突然變慢；
5. 字幕強化：核心結論、關鍵數字、分點標號用醒目字幕突出，降低理解成本。

科普段文案示例（以「紅星後效應 / 原地」為例）：

20-23s 【解釋1】你盯著旋轉的圓圈看了 30 秒，停下來再看靜止的牆，牆居然在動 → 字幕：眼睛先「累壞了」 23-26s 【解釋2】這是因為你的視網膜細胞剛才一直朝一個方向放電，停下來之後它們還在慣性地往回彈 → 字幕：視覺神經的慣性 26-29s 【解釋3】所以你明明站在原地不動，卻感覺世界在往反方向跑 → 字幕：你沒動，是眼睛在「說謊」 29-32s 【解釋4】這種現象叫運動後效，所有感官系統都有類似的「疲勞殘留」——耳朵聽久了噪音也會幻聽，手摸久了冷水也會覺得水在變熱 → 字幕：不只是眼睛，全身都有「慣性」

第五步：結尾反轉錨詞（最後 5-8 秒）

核心目標：把錨詞從「困境」翻轉成「理解 / 釋然 / 力量」，形成情緒閉環。

硬性格式：

1. 最後一句話必須重新定義錨詞——開頭它是觀眾的困境，結尾它變成力量或領悟；
2. 句式參考：「原來，……不是你的錯，而是……」/「看懂了這一點，你就不再……」/「所謂……，其實是……」；
3. 畫面回到和鉤子段呼應的場景（如鉤子段是書桌，結尾也回到書桌，但心境不同）。

結尾反轉示例（以「原地」為例）：

32-36s 【結尾反轉】原來，「原地」不是你夠努力，而是你的感官系統在跟你開一個小小的玩笑。看懂了這一點，你就不會再因為明明在動卻感覺沒進步而焦慮——你只是需要停下來，讓眼睛休息一下。 畫面：從旋轉的漩渦緩緩淡出，回到開頭那間安靜的書桌，陽光照在桌面上。

---

輸入格式

使用者提供：總時長、主題 / 知識內核、可選賽道 / 配色 / 風格偏好。Agent 自動匹配鉤子類型、主體邏輯、結尾方式，生成完整分鏡腳本（時間戳 + 畫面 + 字幕 + 結構標註）。

分鏡腳本輸出格式：每個分鏡標註【鉤子類型】【主體邏輯-分點N】【結尾方式】，讓使用者一眼看清結構選擇。

示例 1（40 秒，冷知識賽道，主題：熵增）：

結構選擇：靈魂提問型鉤子 + 遞進推理式主體 + 總結強化型結尾（適配 1-3 分鐘檔位的壓縮版） 0-4s 【鉤子·靈魂提問】你已經把房間收拾得一塵不染，為什麼一週後又亂了？ 4-7s 【主體·遞進1·個人尺度】剛整理好的書桌，書本悄悄滑向邊緣 → 字幕：東西總在自己滑向混亂 7-10s 【主體·遞進2·自然尺度】一滴墨落進清水，緩緩散開，再也聚不回來 → 字幕：分子從不停下擴散的腳步 10-13s 【主體·遞進3·社會尺度】一條沒人掃的老街，落葉一層壓一層 → 字幕：秩序一旦沒人維護就會塌方 13-16s 【主體·底層原理收攏】所以，混亂才是世界的預設狀態，秩序才是要花錢、花精力去維持的例外。 16-34s 【主體·歷史素材後置】克勞修斯 1865 年提出熵、玻爾茲曼墓碑上的公式、一杯冷水永遠不會自己燒開…… 34-40s 【結尾·總結強化】對抗熵增，是每個人用一生做的長期修行。

示例 2（25 秒，生活健康賽道，主題：喝冰水 vs 喝溫水）：

結構選擇：反常識結論型鉤子 + 闢謠糾偏式主體 + 互動引導型結尾（適配 15-30 秒超短檔位） 0-3s 【鉤子·反常識結論】喝冰水傷胃？這個說法騙了你幾十年。 3-8s 【主體·破誤區】很多人覺得冰水刺激腸胃 → 字幕：冰水 = 傷胃？ 8-15s 【主體·立結論】真相是：胃的溫度始終保持 37°C，冰水進去瞬間就被加熱，根本傷不到胃 → 字幕：胃自帶恆溫系統 15-20s 【主體·真相反轉】真正傷胃的是：空腹大量喝冰 + 長期飲食不規律 → 字幕：壞習慣才是元兇 20-25s 【結尾·互動引導】你平時喝冰水還是溫水？評論區告訴我。

完整示例工程（examples/ 目錄）

技能內建兩個開箱即測的完整示例工程，複製到專案裡即可跑通 lint / preview / render 全流程：

示例	路徑	寫作體系	時長	風格
熵增科普	examples/entropy-16-9/	分點拆解式（基礎模板）	40s	深色知識卡片風
越睡越累	examples/sleep-tired-16-9/	錨詞驅動高潮模板（17s 重拍爆發）	40s	醫療科技風

兩個示例均通過 lint 校驗（0 錯誤 0 警告），1920×1080 高清輸出，可作為不同寫作體系的參考樣板。

編寫組合的硬性規則

• 嚴格遵循 HyperFrames 組合契約：根節點帶 data-composition-id、data-width、data-height、data-duration；片段用 class="clip" + data-start + data-duration；註冊一條 paused 的 GSAP 時間線到 window.__timelines["<id>"]（key 與根節點 data-composition-id 一致）。
• 16:9 橫版：<meta name="viewport" content="width=1920, height=1080">，根節點同尺寸；預設 1920×1080 高清輸出。
• 寫碼前先通讀 references/hyperframes-contract.md，規避全部常見 lint 錯誤與 GSAP 陷阱。
• 不使用 <template> 包裹獨立根節點；不輸出程式碼片段，必須完整獨立 HTML。
• 分鏡 ≥2 時採用模組化子組合架構：每個場景一個 compositions/scene-*.html（<template> 內包含該場景的 style/script/根節點），主 index.html 用 data-composition-src 掛載各場景；宿主 data-composition-id、子組合檔案內根節點 data-composition-id、window.__timelines key 三者必須一致。詳見 references/hyperframes-contract.md 第 8 節。

最小可執行程式碼示例（2 個 clip，直接可跑）

以下是一個完整的 index.html 最小示例，包含 2 個分鏡、元素貫穿轉場、GSAP 時間線註冊。新場景時以此為 baseline 修改：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>熵增 · 示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* 根容器：1920×1080，16:9 */
  .composition {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #0a0a0f;
  }

  /* clip 片段：絕對定位鋪滿，由框架控制可見性 */
  .clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* 分鏡 1：混亂的書桌 */
  #scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
  #scene-desk .book {
    position: absolute;
    width: 80px;
    height: 120px;
    background: #e94560;
    border-radius: 4px;
    left: 300px;
    top: 300px;
    transform-origin: center;
  }
  #scene-desk .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }

  /* 分鏡 2：墨水滴入清水 */
  #scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
  #scene-ink .drop {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #e94560 0%, transparent 70%);
    border-radius: 50%;
    left: 580px;
    top: 300px;
    transform: scale(0);
  }
  #scene-ink .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }
</style>
</head>
<body>

<!-- 根節點：data-composition-id 必須和 window.__timelines 的 key 一致 -->
<div class="composition"
     data-composition-id="entropy-demo"
     data-width="1920"
     data-height="1080"
     data-duration="10">

  <!-- clip 1：0-5 秒，書桌場景 -->
  <div class="clip" id="scene-desk" data-start="0" data-duration="5">
    <div class="book" id="book"></div>
    <div class="subtitle" id="desk-subtitle">東西總在自己滑向混亂</div>
  </div>

  <!-- clip 2：5-10 秒，墨水擴散場景（元素貫穿：書的紅色 → 墨水的紅色） -->
  <div class="clip" id="scene-ink" data-start="5" data-duration="5">
    <div class="drop" id="ink-drop"></div>
    <div class="subtitle" id="ink-subtitle">分子從不停下擴散的腳步</div>
  </div>

</div>

<script>
  // 註冊一條 paused 的 GSAP 時間線到 window.__timelines
  window.__timelines = window.__timelines || {};

  const tl = gsap.timeline({ paused: true });

  // === 場景 1：書桌（0-5s） ===
  tl.from("#book", {
    x: 0, y: 0, rotation: 0,
    duration: 2, ease: "power2.out"
  }, 0.5);
  // 書悄悄滑向邊緣（表現「混亂」）
  tl.to("#book", {
    x: 200, y: 100, rotation: 15,
    duration: 3, ease: "power1.inOut"
  }, 1);
  // 字幕淡入
  tl.from("#desk-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 2);

  // === 轉場：書的紅色元素 → 墨水的紅色（5s 處元素貫穿） ===
  // 前一個 clip 的元素在 clip 結束時自然消失，後一個 clip 的元素同時入場
  // 這裡透過顏色呼應實現「同一個元素貫穿前後」

  // === 場景 2：墨水擴散（5-10s） ===
  tl.from("#ink-drop", {
    scale: 0, opacity: 0,
    duration: 0.5, ease: "power2.out"
  }, 5.2);
  tl.to("#ink-drop", {
    scale: 4, opacity: 0.6,
    duration: 4, ease: "power1.out"
  }, 5.5);
  tl.from("#ink-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 6);

  // 註冊到全域
  window.__timelines["entropy-demo"] = tl;
</script>

</body>
</html>

關鍵註解：

• data-composition-id="entropy-demo" 必須和 window.__timelines["entropy-demo"] 的 key 完全一致；
• data-duration 單位是秒，不是毫秒；
• GSAP 時間線的 position 參數（第二個參數）也是秒；
• clip 元素本身不要 tween（框架控制可見性），只 tween 它的子元素；
• 元素貫穿轉場：前一個 clip 的元素變形 / 移動到某個狀態，後一個 clip 開始時從相似的位置 / 型態入場，形成「同一個東西在連續運動」的錯覺。

分鏡圖形/動畫選擇指南（自動匹配）

製作時根據每個分鏡文案的核心意象自動選擇右側圖形與動效，不固定使用示例中的網格/散點/柱條。

選擇流程

1. 解析每個分鏡文案，提取核心意象（如「增長/混亂/可能性/秩序/網路/週期/氛圍」）與情緒強度（冷峻 / 爆裂 / 夢幻 / 史詩 / 賽博 / 治癒等）；
2. 按下表選定 1 個主圖形承載核心意象，並可疊加至多 5 種輔助點綴（粒子、光效、裝飾線、背景紋理、邊角符號、輝光、光暈、幾何碎片等），動效按表匹配；點綴數量與種類服務於文案情緒，不必每鏡都堆滿；
3. 檢查確定性：優先 CSS/HTML 可實現方案；分形/元胞自動機/3D/Shader/紋理/粒子等複雜圖形必須確定性實現（固定種子、預計算陣列，禁止 Math.random、即時時鐘、網路請求），數據圖表用示意性數據；
4. 圖形必須落在 16:9 安全框內（四周 ≥64px），不得溢位畫布；視覺密度、特效強度、配色飽和度由文案情緒自主決定，不做統一「克制」限制。

語義 → 圖形 → 動效 映射（常用）

分鏡意象	推薦圖形	推薦動效
增長 / 建立秩序	柱狀條、階梯、樹形生長、黃金螺旋	從底生長、逐步升高
混亂 / 熵增 / 無序	網格方塊、散點、Voronoi 碎塊、分形裂紋	漂移、擴散、碎裂
可能性 / 分支	樹圖、散點、弦線、思維導圖	向外發散、分支生長
週期 / 循環	環形圖、圓環、波形、擺線	旋轉、脈衝、往返
關係 / 網路	網路拓撲、知識圖譜、力導向圖	節點連線、漸進點亮
時間 / 過程	折線圖、面積圖、時間軸	筆劃生長、軌跡延伸
對比 / 分佈	餅圖、環形圖、雷達圖、箱線圖	扇區展開、逐項呈現
空間 / 結構	等距網格、點雲、3D 線框	逐層搭建、旋轉入場
氛圍 / 抽象	噪聲紋理、波干涉、駐波、粒子流	流動、起伏、消散

完整候選庫（9 大類：基礎幾何、數據圖表、分形生成藝術、模擬與元胞自動機、像素點陣與程序化紋理、3D 圖形、結構圖/關係圖、文字類圖形、動態圖形）及確定性實現約束見 references/hyperframes-contract.md 第 7 節「圖形選擇庫」。

Vibe 影片大賞風格（16:9 橫版）

**核心原則：視覺風格由文案自主決定，追求炫酷

…

[truncated for translation]