Bang Motion — 不是簡報的動態圖像網頁
屬於動態說明影片庫。 以下內容是獨立 index.html（HTML + CSS + GSAP）的 Bang Motion 導演手冊。在此庫中，相同的外觀也以三個引擎提供，並可像任何其他風格一樣被選取使用：
style.json: 清單（bang-motion，畫布 1080x1920，30 fps，引擎remotion、fframes和kyfram）remotion/:kit/（GlowHorizon、GrainyMeshBlob、GlassCard、KineticTitle、StatusPill、BangBanner、GlassCaptions、LivingGrain）、template/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.mdfframes/:Cargo.toml、src/（lib、tokens、kit、look、video、main）、tools/ff.shkyfram/PRELUDE.lgv: 調色板標記與節拍元素（drawBackdrop、drawBanner、drawCaptions、drawPanel、drawDot、drawFrame）用於.lgv場景docs/style-guide.md和docs/style-prompt.md: 壓縮樣式表與便攜提示
使用 ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion（或 --engine fframes|kyfram）搭建劇集。管線技能將風格名稱作為 $MOTION_STYLE，因此工作流程中的其他部分無需更改。
風格 DNA，一言以蔽之：一個連續的世界，至少兩層的背景（深色基底加上發光地平線）且始終在移動，顆粒根據 t 偏移而非隨機噪聲，呼吸鏡頭而非靜止畫面，有動機的轉場而非單一的循環擦除手法，以及每個鏡頭只表達一個陳述，而非一張投影片那樣塞滿資訊。
v1.19.0 · 由 Bang Tutorial 製作 · MIT 授權。 變更記錄在 CHANGELOG.md；安裝方式在 README.md。
此技能適用於任何 AI 編碼代理（開放式 Agent Skills 格式）。其內容是關於「像影片般移動、而非簡報」的動態圖像的法則與配方——在撰寫程式碼前必須遵守。
先決條件 — 僅需瀏覽器
交付物（index.html）只需現代瀏覽器 + 網際網路以載入 CDN（GSAP、字型）。Python 和 Node 為可選，僅用於工具：scripts/serve.py（無快取伺服器，僅在使用本地模組時需要）、puppeteer（自動化快照/驗證，scripts/export-frames.mjs → MP4）。如果使用者沒有這兩者：(1) 仍然構建單一檔案，雙擊即可打開；(2) 通過 ?debug=1（面板拖曳）和每個關鍵秒數的手動螢幕截圖進行視覺驗證；(3) MP4 透過螢幕錄製（OBS / 瀏覽器標籤頁錄製）——說明螢幕錄製可能會掉幀，而逐幀渲染需要 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 幀並在第一次點擊時開始——不要顯示「點擊開始」的文字。這已內建在兩個起點中。
結構性禁令 — 可機械檢查的簡報測試
其他模型（以及你，如果你累了）即使閱讀了以下法則，也會陷入這個模式。在提交之前，檢查程式碼，而不是感覺：
-
grep -c "class=\"scene\"\|<section" index.html— 如果 ≥ 3 個場景是以<section>形式呈現，並通過autoAlpha/opacity 顯示/隱藏 → 那就是幻燈片。場景的切換應是世界/鏡頭移動的結果（鏡頭移動、甩向另一個角落、推進、背景變換），而不是因為章節淡入淡出。合法的例外：舞台卡通（references/kartun-panggung.md）在舞台之間使用 96 像素的剪切/滑動——可以，因為每個舞台都充滿生機（≥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-kartun、-jurnalisme、-katalog、-sketsa（拼貼模式：鏡頭探索靜態素材）、starter-explainer（連續動作：世界流動）、或starter-explainer-panggung（舞台卡通：每個場景一個舞台、關節綁定、鏡頭僅在舞台內）。拼貼模式有一種綁定；舞台模式有另一種綁定。不能從assets/starter-opener.html（文字開場）開始，也不能從零開始。 -
縮小是幻燈片。 鏡頭縮放 < 1.08，使得房屋如拇指般大，空地佔據一半螢幕 → 即使所有東西都在動，也還是 PPT。世界被分割成幀大小的舞台，而不是一個被探索的大地圖（
kartun-panggung.md法則 1）。 -
模板框架（開場/宣傳片）。 檢查流程和程式碼：第一個場景是文字放大然後向左退出；三個並排的特色圖塊/卡片；輸入框/搜尋欄正在輸入；掛鉤 → 功能 → 功能 → 承諾 → 標誌 → CTA 的順序。兩個或以上符合，且沒有概念要求 → 模板，即使外殼是新的。從
references/opener-konsep.md重新選擇框架。
只要有一點不符合 → 在展示給使用者之前必須重做。
涵蓋的工作類型
此技能適用於通用的網頁動態圖像。說明影片只是其中一種——它有自己獨立文件，因為結構不同，而不是因為它是主要的。
起點根據其類別命名：starter-opener.html 用於開場、宣傳片、片頭、介紹和動態文字；starter-explainer-*.html 用於說明影片，後綴為模式/風格（-kartun、-jurnalisme、-katalog、-sketsa = 拼貼；無後綴 = 連續動作；-panggung = 舞台卡通）。舞台卡通是一種說明影片模式（風格 6），而非獨立類別：其目標仍然是通過 VO 進行解釋，不同的只是製作方式。
| 類型 | 常見時長 | 特徵 | 配方 |
|---|---|---|---|
| 開場 / 產品宣傳片 | 25–40 秒 | 一個概念從選單中選出（框架源自產品，非固定順序），一個特殊時刻，品牌結尾 | references/opener-konsep.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/kartun-panggung.md：每個場景一個舞台，縮放 1.08–1.95，舞台內連續，舞台之間 96 像素剪切/滑動，手動關節綁定，無字幕，扁平明亮調色板。區分句子、視覺節拍、取景和舞台切換。要直接在 After Effects 中構建，請閱讀 references/ae-bridge-higgsfield.md。這些說明影片的具體指南澄清了下面的開場規則；字體示例、場景數量和效果不是通用配方。
法則 #1 — 這是影片，不是幻燈片
最常見的毛病：模型像幻燈片一樣組織場景——標題 + 副標題 + 正文 + 一排徽章。這會立即被識別為「PPT」並被拒絕。
嚴格規則：
- 對於開場：每個場景一個短句 + 最多一個主要物件。 沒有引言（「01 — 功能」）、副標題、說明段落、功能晶片/徽章或技術後設資料（套件名稱、長 URL）。正在使用的產品 UI 一部分的晶片、按鈕和標籤不在此限。
- 新資訊 = 新的視覺反應。 在說明影片中，如果仍然相關，請更改同一世界內的狀態/動作；句子的變化不一定需要更換鏡頭。
- 列表點應替換為視覺化，而不是自動三個圖塊。 從
references/opener-konsep.md的功能選單中選擇一種方式（展示一個功能、文字變化、物件變形、卡片洗牌、網格圖塊…）；連續兩個開場不得使用相同方式。 - 場景必須是活的。 當物件承載動作時，鏡頭可以停留。移動鏡頭以跟隨或揭示某些東西；不要依賴在靜止背景上淡入/滑入文字，或在所有區段重複平移/縮放。
- 「拉近拉遠」= 鏡頭尺寸，不是鏡頭呼吸。 如果影片感覺靜態或用戶要求縮放，鏡頭應靠近正在講述故事的元素（中近景 / 特寫），然後根據內容節奏後退到全景；百分之幾的呼吸幾乎看不見（
techniques.md§3b）。
在設計場景之前，請先閱讀 references/anti-ppt.md——它包含實際違規案例及其修正方法。
法則 #2 — 確定性，否則死亡
沒有一行程式碼應該讀取系統時鐘。所有視覺效果都是 tl.time()（GSAP 時間軸時間）的純函數：光譜、運行數字、粒子、鏡頭抖動（高頻正弦波，非 Math.random()）、「流動」的物體位置（距離補間，非每幀累積速度）。結果：拖曳精確如 After Effects 時間軸，且逐幀渲染到 MP4 每次都會產生相同的圖像。
法則 #3 — 風格源自主題，而非起點，也非參考
常見失敗：另一個產品的開場與前一個產品的開場外觀完全相同——黑暗、藍色點綴、發光、星雲、相同的字體——因為模型從起點提取了風格。動畫可能很好，但仍然失敗：開場是產品的臉，而兩個產品不應該有相同的臉。
- 先有風格簡報，後有程式碼。 在觸碰起點之前，先寫下這六行並連同場景流程展示給使用者：
- 主題/產品 +
…
（剩餘部分截斷）
注意：原文被截斷，上述翻譯基於提供的完整 SKILL.md 內容。其餘內容（如 references、scripts 等）未包含在原文中，因此無法翻譯。