Bang Motion：非 PPT 的網頁動態圖形
v1.19.0 · 作者：Bang Tutorial · MIT。 變更記錄請見上游 CHANGELOG.md；安裝說明請見上游 README.md。此副本為上游技能的繁體中文翻譯。
此技能適用於任何 AI 程式碼代理（開放代理技能格式）。 它包含讓動態圖形如同影片般流動、而非投影片的法則與配方。請在撰寫程式碼前遵循它們。
前置需求：僅需瀏覽器
最終產出（index.html）只需現代瀏覽器以及用於 CDN（GSAP、字型）的網路連線。Python 和 Node 為選用，僅用於輔助工具：
scripts/serve.py（無快取伺服器，僅在使用本地模組時需要）、
puppeteer（自動快照/驗證，scripts/export-frames.mjs → MP4）。
如果使用者兩者都沒有：(1) 仍然建置一個單一檔案並雙擊開啟；(2) 透過 ?debug=1（拖曳面板）和關鍵秒數的手動螢幕截圖進行視覺驗證；(3) 透過螢幕錄製（OBS / 瀏覽器分頁錄製）取得 MP4，並說明螢幕錄製可能掉影格，而逐影格渲染需要 Node。切勿製作一個僅為了觀看就需要 npm install 的產出。
ffmpeg 也是選用的。 先檢查（ffmpeg -version）；如果缺少：
| 需求 | 有 ffmpeg | 無 ffmpeg |
|---|---|---|
| VO 同步（句子/段落邊界） | silencedetect | scripts/vo-pauses.html：在瀏覽器中開啟，選取音訊，複製 SEG/PARA；結果相同（Web Audio，無需安裝） |
| 音訊長度/格式 | ffprobe | vo-pauses.html 中的 DUR 數字；瀏覽器直接播放 wav/mp3/m4a/ogg |
| MP4 匯出 | 合併 export-frames.mjs 的 PNG | 無 MP4：提供一鍵安裝指令（winget install Gyan.FFmpeg / brew install ffmpeg）或螢幕錄製 |
| 研究參考影片（提取影格） | fps= + tile= | 請使用者在關鍵秒數傳送螢幕截圖，或在瀏覽器中開啟影片並在特定秒數捕捉 |
沒有 ffmpeg 時，解說影片流程仍可完成至 VO 同步；僅 MP4 需要安裝。
播放器：無、自動播放、循環
預設產出：螢幕上無面板/播放器，開啟後立即播放，結束時從頭開始（onComplete → play(0)；如果有聲音，音訊也會循環）。隱藏控制項：R 重新開始，空白鍵暫停。拖曳/時鐘面板僅在 ?debug=1 時出現（審查工具），而 ?clean=1 則維持自動播放以利匯出。有聲音？立即嘗試 play()；如果瀏覽器阻止，則停留在影格 0 並在第一次點擊時開始，無需顯示「點擊開始」文字。這已內建於兩個起點範本中。
結構性禁止事項：可機械化執行的 PPT 檢查
其他模型（以及當你疲倦時的你）即使在閱讀下方法則後，仍會陷入這些模式。在交付前，檢查程式碼，而非你的感覺：
-
grep -c "class=\"scene\"\|<section" index.html：如果有 ≥ 3 個由<section>元素組成、透過autoAlpha/透明度切換開關的場景，那就是投影片。場景必須因為世界/攝影機移動而改變（攝影機移動、甩向另一個角落、向前推進、背景改變），而不是因為區塊淡入淡出。合法例外：卡通舞台（references/cartoon-stage.md）在舞台之間使用切換/96px 滑動。這是允許的，因為每個舞台完全活躍（≥10 個物件在動作中），而非正在淡入淡出的靜態圖片。 -
存在一條視覺主線持續貫穿：一個主體（連續動作）或一個攝影機在其上移動的拼貼/紙張/白色世界（卡通、照片、目錄、素描）。全版照片切換，無共享世界 → PPT。每場景一張圖片 + 一個句子，每個場景切換 → 仍然是投影片，即使攝影機移動：每個場景有 3–5 個元素隨每個短語逐漸進入（explainer.md「一個場景 = 3–5 個元素」）。
-
計算每個場景的文字節點：眉毛文字/引文 + 標題 + 正文/感謝名單 = 3 層 → PPT。最多兩層：一個大數字/句子 + 一個世界標籤。一個包含 ≤ 3 行短文的文件/印章/日期區塊算作一個物件，而非文字層級。
-
僅有 Ken Burns（在照片上縮放 1.0→1.05）作為唯一動態 → PPT。每秒的動態必須來自風格簡報中從
techniques.md§7c 選單中選擇的背景動態語言（紋理背景上的攝影機呼吸、漸變飄移、浮動色塊、實時顆粒、每段的光掃、一個緩慢旋轉的大形狀、上升粒子、呼吸網格、鬼影文字飄移、Ken Burns + 視差…）。側向移動的條/線/片（「車道」、「範圍」、「條紋」、「水平粒子雨」）已經以不同名稱連續用於兩個專案。它們不是預設選項；僅在主題確實是速度/流動時使用，且絕不連續兩個專案使用。 -
每次剪輯僅有淡入淡出 + 縮放凸起 + 漏光的轉場 → PPT 範本。甩向另一個角落、切到一個儀器（地圖/速度表/個人檔案）、向前推進。
-
解說影片從其風格對應的起點範本開始：
starter-explainer-cartoon、-journalism、-catalog、-sketch（拼貼模式：攝影機在靜態素材上移動）、starter-explainer（連續動作：世界流動）、或starter-explainer-stage（卡通舞台：每場景一個舞台，關節骨架，攝影機僅在舞台內部）。拼貼類共享一個骨架；舞台類有不同的骨架。不是從assets/starter-opener.html（文字開場）開始，也不是從頭開始。 -
微縮模型就是投影片。 攝影機縮放 < 1.08，使得房子如拇指大小，空曠地面佔據半個螢幕 → 即使所有東西都在移動，也是 PPT。將世界分割成影格大小的舞台，而非一個待探索的大地圖（
cartoon-stage.md法則 1）。 -
範本骨架（開場/宣傳片）。 檢查流程和程式碼：第一個場景是文字成長然後向左退出；三個特色磚/卡並排；一個正在輸入的輸入框/搜尋欄；順序鉤子 → 特色 → 特色 → 承諾 → 標誌 → 行動呼籲。兩個或以上且非概念要求 → 即便是新外觀，仍然是範本。從
references/opener-concepts.md重新選擇骨架。
即使只失敗一項 → 在向使用者展示前重做。
涵蓋的工作類型
此技能通用於網頁動態圖形。解說影片只是其中一種，它有其自己的文件，因為其結構不同，而非因為它是主要類型。
起點範本按類別命名：starter-opener.html 用於開場、宣傳片、片花、片頭、動態文字排版；starter-explainer-*.html 用於解說影片，附帶模式/風格後綴（-cartoon、-journalism、-catalog、-sketch = 拼貼；無後綴 = 連續動作；-stage = 卡通舞台）。卡通舞台是一種解說影片模式（風格 6），而非獨立類別：其目標仍然是用 VO 解說，只是製作方式不同。
| 類型 | 常見長度 | 特徵 | 配方 |
|---|---|---|---|
| 開場 / 產品宣傳片 | 25–40 秒 | 一個來自選單的概念（骨架來自產品，而非固定順序）、一個特殊時刻、品牌結尾 | references/opener-concepts.md + 下方工作流程 + references/techniques.md |
| 片花 / 識別 / 標誌短曲 | 3–8 秒 | 標誌建構、一個招牌動作，在觀眾注意到前完成 | techniques.md（標誌建構、漏光） |
| 頻道片頭 / 片尾 | 5–12 秒 | 頻道名稱 + 每集相同的招牌動作 | 下方工作流程 |
| 動態文字排版 / 歌詞 | 15–60 秒 | 文字是主體；按字/字母分割；節奏跟隨音訊 | techniques.md（分割 + 定向模糊、逐字 3D 平移） |
| 標題 / 下方三分之一 / 段落片花 | 2–6 秒 | 覆蓋在影片上的小元素，乾淨進出，透明背景 | techniques.md |
| 解說影片 / 解說影片 | 30–90 秒 | 有來源的事實、顯示的實體、變化的觀點、五種風格 | references/explainer.md + 每種風格的起點範本 |
解說影片與角色：在決定鏡頭前請先閱讀
對於一個扁平教育卡通解說影片（第六種風格，卡通舞台），或一個感覺像投影片/微縮模型的修正，請閱讀 references/cartoon-stage.md：每場景一個舞台，縮放 1.08–1.95，舞台內部連續，舞台之間使用切換/96px 滑動，帶有手動變換的關節骨架、零字幕、明亮的扁平色調。區分句子、視覺節拍、構圖和舞台變化。要直接在 After Effects 中建置，請閱讀 references/ae-bridge-higgsfield.md。此解說專用指引強化了下面的開場規則；範例字型、場景數量和效果並非通用配方。
法則 #1：這是影片，不是投影片
最常見的毛病：模型將場景佈局得像投影片，帶有標題 + 副標題 + 正文 + 一排徽章。這會立即被辨識為「PPT」並被拒絕。
硬性規則：
- 對於開場：每場景一個短句 + 最多一個主要物件。 沒有引文（「01 — 特色」）、副標題、說明段落、特色晶片/徽章或技術元數據（套件名稱、長 URL）。正在使用的產品 UI 中的晶片、按鈕和標籤不計入。
- 新資訊 = 新的視覺反應。 在解說影片中，當仍然相關時，在同一世界中改變狀態/動作；一個新句子不一定需要改變鏡頭。
- 用視覺取代項目符號清單，而非自動使用三個磚塊。 從
references/opener-concepts.md的特色選單中選擇方式（一個特色示範、互換的文字、一個變形的物件、洗牌卡片、磚塊網格…）；連續兩個開場不使用相同方式。 - 場景必須是活躍的。 攝影機可以休息，而物件繼續動作。移動攝影機以跟隨或揭示某物；不要依賴文字在靜止背景上淡入/滑動，或每個段落重複平移/縮放。
- 「縮放進出」= 鏡頭尺寸，非攝影機呼吸。 當影片感覺靜態或使用者要求縮放時，攝影機移動到正在講述故事的元素（中近景 / 特寫），然後跟隨內容節奏拉回廣角；幾個百分比的呼吸幾乎不可見（
techniques.md§3b）。
在設計場景前，請先閱讀 references/anti-ppt.md。它列出了真實違規案例及其修正方法。
法則 #2：決定性，否則死亡
沒有一行程式碼讀取系統時鐘。每個視覺元素都是 tl.time()（GSAP 時間軸時間）的純函數：頻譜、運行數字、粒子、攝影機抖動（高頻正弦波，非 Math.random()）、「流動」物件的位置（補間距離，不累積每影格速度）。結果：拖曳精確如 After Effects 時間軸，逐影格渲染至 MP4 能產生完全相同的影像。
法則 #3：風格源自主題，而非起點範本，也非參考範例
一個常見的失敗：為不同產品所做的開場，最終卻與前一個產品的開場有著完全相同的外觀：暗色、藍色強調、光暈、星雲、相同的字型，因為模型從起點範本中提取了風格。動畫可能很好，但仍然失敗：開場是產品的門面，兩個產品不能共享同一張臉。
- 先有風格簡報，後有程式碼。 在觸碰起點範本之前，撰寫以下幾行，並連同場景流程一起展示給使用者：
- 主題/產品 + 三個形容詞來描述想要留下的感覺；
- 概念與結構指紋（開場/宣傳片）：來自
references/opener-concepts.md的三個候選概念，一個根據產品理由選擇，然後是概念 · 場景數量 · 每場景主要物件 · 開場 · 結尾； - 色板：一個取自品牌/主題的主色（標誌、應用程式圖示、網站、包裝），一個背景色，一個強調色。說明每個顏色的十六進位碼和來源；非來自品牌的顏色應寫為「衍生：原因」；
- 一個具有符合該感覺特色的展示字型（非 Poppins/Inter/Roboto/Montserrat/Arial）+ 一個搭配字型；例外：主張 → 方式 → 結果概念使用產品自己的 UI 字型（
references/opener-concepts.md）； - 文字強調：無文字高亮，或一種高亮形式（命名它）。文字高亮是選用的，並非每個開場的預設；
- 每段落的背景語言：從「風格方向」表中為所有部分選擇一個方向，或一個變更計畫（哪個段落變更、變成什麼、為什麼、由什麼觸發）；
- 招牌動作：一種重複作為身份識別的動態類型（物件擦除、逐字 3D 翻轉、飛舞的紙張、繪製的線條、撞擊邊緣的色塊…）；
- 背景動態：從
techniques.md§7c 選單中選擇一種語言。它與招牌動作不同，且非自動預設為「物件交叉」； - 背景表面：從 §7d 選單中選擇（漸層/光/紋理/顆粒漸層，≥ 2 層），非扁平；
- 物件渲染風格：從
techniques.md§7e 選單中選擇一個家族（扁平、黏土、光澤、玻璃、等距、寫實、霓虹線…）； - 照片素材（當概念使用人物/地點/產品的照片時）：詢問使用者來源（使用者照片、透過 Higgsfield MCP 生成、或授權圖庫），加上每幕的鏡頭清單（
references/opener-concepts.md，「開場中的照片」）； - 轉場：決定哪些邊界需要效果，哪些可以是單純的切換；從 §4c 選單中選擇以符合情境；不強制使用兩種或 3D；
- 一個特殊時刻（使用最昂貴效果的位置，僅一次）。
- 起點範本是架構，而非風格。
assets/starter-opener.html中的灰色、系統字型和 WebGL 背景是佔位符。如果其中任何一項在最終結果中仍然可見，則表示風格未被衍生。WebGL 背景（星雲、迷幻 […]