Bang Motion — 動態圖形網頁，不是 PPT

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	無 ffmpeg
語音同步（句子/段落邊界）	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，解說影片的工作流程仍可完整進行，直到語音同步階段；僅 MP4 匯出需要安裝。

播放器——無，自動播放，循環播放

預設交付物：螢幕上無任何面板或播放器，開啟即自動播放，並在播放完畢後自動重播（onComplete → play(0)；若有聲音，音訊將一同重播）。隱藏控制：R 重播，空白鍵暫停。時間軸拖曳面板/時鐘僅在網址加上 ?debug=1 時顯示（供審查用），而 ?clean=1 會暫停自動播放以供匯出。若有聲音？直接嘗試 play()；若被瀏覽器封鎖，則停留在第 0 幀，並在第一次點擊時開始播放——不要顯示「點擊開始」等文字。此機制已內建於兩個起手式中。

結構禁令——可機械檢查的 PPT 偵測

其他模型（以及疲憊時的你）即使讀過以下規則，仍會落入此模式。在交付前，請檢查程式碼，而非憑感覺：

1. grep -c "class=\"scene\"\|<section" index.html —— 若有 ≥ 3 個場景是透過 autoAlpha/opacity 來切換顯示的 <section> → 那就是幻燈片。場景切換應基於世界/鏡頭移動（鏡頭移動、甩到另一個角落、穿越、背景變換），而非透過淡入淡出切換區段。合法例外：舞台式卡通 (references/kartun-panggung.md) 可在舞台間使用裁切/平移 96 像素——這是允許的，因為每個舞台都是活的（≥ 10 個正在運作的物體），而非靜止圖片的淡入淡出。

2. 需有持續的視覺主線：一個進行連續動作的主角，或一個被鏡頭探索的拼貼/紙張/白色世界（卡通、照片、目錄、素描）。全版照片不斷切換而無共享世界 → PPT。每個場景一圖一句→仍然是幻燈片，即使鏡頭在移動：每個場景應有 3–5 個元素，並隨著旁白的短語逐步呈現 (explainer.md "一個場景 = 3–5 個元素")。

3. 計算每個場景的文字層級：眉毛標題/關鍵字 + 主標題 + 內文/字幕 = 3 層 → PPT。上限為兩層：一個大字（數字或句子）+ 一個世界標籤。文件、印章、日期區塊等含 ≤ 3 行短文的物件，視為物件而非文字層級。

4. 僅有 Ken Burns 效果（照片 scale 1.0→1.05）作為唯一動態 → PPT。每秒的動態必須來自 techniques.md §7c 選單中選定的背景動態語言（紋理背景上的呼吸鏡頭、流動的漸層、漂浮的色塊、動態顆粒、分段的光影掃掠、緩慢旋轉的大型形狀、上升粒子、呼吸網格、漂移的幽靈文字、Ken Burns + 視差……）。橫向移動的條/線/片段（"車道"、"範圍"、"條紋"、水平粒子雨）已在連續兩個不同名稱的項目中使用——這不是預設選項；僅當主題確實為速度/流動時才使用，且不可連續兩個項目皆使用。

5. 所有切換僅使用淡入淡出 + 縮放凸起 + 漏光 → 範本式 PPT。請使用甩到另一個角落、切換到儀器（地圖/速度表/側面輪廓）、穿越效果。

6. 解說影片應從對應風格的起手式開始：starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（拼貼模式：鏡頭探索靜態素材）、starter-explainer（連續動作：世界是流動的）、或 starter-explainer-panggung（舞台式卡通：每個場景一個舞台，關節骨架，鏡頭僅在舞台內移動）。請不要使用 assets/starter-opener.html（文字開場），也不要從零開始。

7. 微縮模型就是幻燈片。 鏡頭縮放 < 1.08，導致房子如拇指般大小，空白地面佔據半個螢幕 → 即使所有東西都在動，仍是 PPT。世界被分割成畫框大小的舞台，而非一個可供探索的大地圖 (kartun-panggung.md 法則 1)。

8. 範本式框架（開場/宣傳影片）。 檢查流程與程式碼：第一個場景是放大的文字然後向左移出；三個並排的功能卡/瓷磚；輸入框/搜尋列打字效果；順序為鉤子 → 功能 → 功能 → 承諾 → Logo → 呼籲行動。連續兩個或以上項目使用此模式而無特定概念需求 → 即使換了外皮，仍是範本。請從 references/opener-konsep.md 重新選擇框架。

只要違反以上任一項，請在展示給使用者前重新設計。

涵蓋的工作類型

此技能涵蓋一般的網頁動態圖形。解說影片只是其中一種類型——因其結構不同而有獨立文件，並非它是主要類型。

起手式依類別命名：starter-opener.html 用於開場、宣傳影片、片頭、介紹、動態文字排版；starter-explainer-*.html 用於解說影片，後綴代表模式/風格（-kartun、-jurnalisme、-katalog、-sketsa = 拼貼；無後綴 = 連續動作；-panggung = 舞台式卡通）。舞台式卡通是解說影片的一種模式（風格 6），非獨立類別：其目標仍是以旁白進行解說，僅製作方式不同。

類型	常見時長	特徵	參考文件
開場 / 產品宣傳影片	25–40 秒	從選單中選擇一個概念（框架源自產品，非固定順序）、一個獨特時刻、品牌結尾	references/opener-konsep.md + 下方工作流程 + references/techniques.md
片頭 / 識別 / Logo 動畫	3–8 秒	Logo 建構、一個標誌性動態、在觀眾意識到前結束	techniques.md (Logo 建構、漏光)
頻道介紹 / 結尾	5–12 秒	頻道名稱 + 每一集相同的標誌性動態	下方工作流程
動態文字排版 / 歌詞	15–60 秒	文字是主角；以單詞/字母為單位拆分；節奏跟隨音訊	techniques.md (拆分 + 方向性模糊、3D 文字旋轉)
標題 / 下三分之一 / 區段片頭	2–6 秒	疊加在影片上的小元素，進出乾淨，背景透明	techniques.md
解說影片 / 插畫解說	30–90 秒	有來源的事實、實體出現、視角切換、五種風格	references/explainer.md + 各風格的起手式

解說影片與角色：在決定鏡頭前請先閱讀

對於具有角色的平面教育卡通解說影片（第六種風格，舞台式卡通），或是感覺像幻燈片/微縮模型的修改，請閱讀 references/kartun-panggung.md：每個場景一個舞台，縮放 1.08–1.95，在舞台內連續運動，舞台間使用裁切/平移 96 像素，使用手動變換的關節骨架，無說明文字，明亮平面色板。區分句子、視覺節拍、取景、舞台轉換。若要直接在 After Effects 中建構，請閱讀 references/ae-bridge-higgsfield.md。這些解說影片的指南將釐清下方的開場規則；範例字型、場景數量及效果並非通用配方。

法則 #1 — 這是影片，非幻燈片

最常見的通病：模型將場景像幻燈片一樣排列——標題 + 副標 + 內文 + 一排徽章。這一看就是「PPT」，將被拒絕。

嚴格規則：

• 對於開場：每個場景一個短句 + 最多一個主要物體。 沒有眉毛標題（"01 — 功能"）、副標題、說明段落、功能晶片/徽章、或技術後設資料（套件名稱、長網址）。正在使用的產品 UI 中的晶片、按鈕和標籤不在此限。
• 新資訊 = 新的視覺回應。 在解說影片中，若仍相關聯，請在同一個世界中改變狀態/動作；換句子不一定要換鏡頭。
• 列表項目改以視覺呈現，非自動三個瓷磚。 從 references/opener-konsep.md 的功能選單中選擇方式（示範一個功能、文字變換、物體變形、卡片洗牌、網格瓷磚排列……）；連續兩個開場不可使用相同方式。
• 場景必須是活的。 當物體承載動作時，鏡頭可以保持靜止。移動鏡頭是為了跟隨或揭示某物；不要依賴文字在靜態背景上淡入/滑入，或在所有區段重複使用平移/縮放。
• "放大縮小" = 鏡頭尺寸，非鏡頭呼吸。 若影片感覺靜態或用戶要求縮放，鏡頭應靠近正在說故事的元素（中特寫 / 特寫），然後根據內容節奏退回到廣角；幾個百分點的呼吸幾乎無法察覺 (techniques.md §3b)。

在設計場景前，請先閱讀 references/anti-ppt.md——其中包含實際違規案例及其修正方式。

法則 #2 — 確定性，否則報廢

不得有任何一行程式碼讀取系統時鐘。所有視覺效果都是 tl.time()（GSAP 時間軸時間）的純函數：頻譜、數字變化、粒子、鏡頭抖動（高頻正弦波，非 Math.random()）、"流動"的物體位置（基於距離的補間，非逐幀累積速度）。結果：時間軸拖曳精準如 After Effects，且逐幀渲染至 MP4 每次都會產生相同的畫面。

法則 #3 — 風格源自主題，非起手式，非參考

常見失敗：不同產品的開場卻長得跟之前產品的開場一模一樣——深色、藍色點綴、光暈、星雲、相同字型——這是因為模型從起手式擷取了風格。即使動畫做得再好，還是失敗：開場是產品的臉，兩個產品不該有同一張臉。

1. 先制定風格簡報，後寫程式碼。 在觸碰起手式之前，先寫下這幾點並連同場景流程展示給使用者：
   • 主題/產品 + 三個想傳達的情緒形容詞；
   • 概念與結構指紋（開場/宣傳影片）：從 references/opener-konsep.md 選出三個概念候選項，根據產品理由選定一個，然後提供 概念 · 場景數量 · 每個場景的主要物體 · 開場 · 結尾；
   • 調色盤：一個來自品牌/主題的主色（Logo、應用程式圖示、網站、包裝）、一個背景色、一個點綴色——需提供 hex 碼及每個顏色的來源；非來自品牌的顏色應註明「衍生色：理由」；
   • 符合該情緒的顯示字型（非 Poppins/Inter/Roboto/Montserrat/Arial）+ 搭配字型；例外：概念主張 → 方式 → 結果中使用產品 UI 字型本身 (references/opener-konsep.md)；
   • 文字強調：無單詞強調，或一種強調方式（請說明）——單詞強調為選擇性，非每個開場的預設；
   • 各區段的背景語言：全部使用「風格方向」表中的一個方向，或制定切換計劃（哪個區段切換、換成什麼、原因、觸發條件）；
   • 標誌性動態：一種重複使用作為識別的動態類型（物件擦拭、3D 字詞旋轉、飛紙、描繪線條、色塊撞擊邊緣……）；
   • 背景動態：從 techniques.md §7c 選單中選擇一種語言——它與標誌性動態不同，也非預設的「橫向飛過物體」；
   • 背景表面：從 §7d 選單中選擇（漸層/光線/紋理/顆粒漸層，≥ 2 層）——非純色；
   • 物件渲染風格：從 techniques.md §7e 選單中選擇一個系列（平面、黏土、光滑、玻璃、等角、寫實、霓虹線條……）；
   • 照片素材（若概念使用人物/地點/產品的照片）：來源——使用者的照片、透過 MCP Higgsfield 生成、或授權圖庫——必須詢問使用者，並提供每個章節的鏡頭列表 (references/opener-konsep.md "開場中的照片")；
   • 轉場：決定哪些邊界需要效果，哪些只需直接裁切；根據情境從 §4c 選單中選擇，非強制兩種或需要 3D；
   • 一個獨特時刻（使用最昂貴效果的地方，僅一次）。
2. 起手式是架構，非風格。 assets/starter-opener.html 中的灰色、系統字型和 WebGL 背景是佔位符。若最終結果仍看到其中任何一項，代表風格尚未套用。WebGL 背景（星雲、灰塵、網格、光暈）只是八種背景語言之一；若風格方向不同，請關閉它。
3. 參考 = 節奏，非外皮。 從參考影片中提取：每個鏡頭的時長、轉場類型、注意力層級、能量、動態語言。禁止提取：調色盤、字型、紋理、佈局、裝飾形狀、句子、場景順序、獨特時刻（特有的開場/結尾、一次性噱頭）。「做成像這樣」的意思是「有這樣強的能量」，而

…

[內容因長度限制而截斷]