explainer-video

Explainer Video (解說影片)

將單一訊息轉化為節奏明快、附旁白的30–90秒短影片。執行完整管線：腳本 → 分鏡 → 場景建置 → 旁白/字幕同步 → 剪輯 → 潤色，並貫穿一致的風格系統。

使用時機

• 產出30–90秒的產品、運作原理、入門引導或概念影片。
• 從原始想法或功能出發，產出腳本、分鏡與組裝好的片段。
• 將旁白與視覺同步，並為靜音播放加上字幕。

故事結構（先決定這個）

解說影片是一場論證，不是功能導覽。在任何管線步驟之前，先鎖定敘事結構，讓後續每個選擇都為其服務。

• 一個核心想法。 觀眾看完後能重複的一句話。如果無法用一句話說清楚，影片就沒有主幹——縮小範圍直到能做到為止。所有不服務該想法的東西都要刪除，而不是縮減。
• 腳本優先。 旁白是主幹；視覺內容是用來說明正在唸的台詞，永遠不該領先。在開始分鏡或動畫之前，先撰寫並計時文字——砍掉一句話遠比砍掉一個已建置的場景便宜得多。
• 用利害關係來鋪陳「如何」。 不要直接從問題跳到機制。先讓觀眾感受問題的代價；那種緊張感才會讓他們想看到解決方案。

解說影片的故事弧線——每個階段一個節拍，依序進行：

階段	敘事任務	觀眾應該想什麼
問題	用他們的語言說出痛點	「那就是我。」
利害關係	展示痛點的代價（時間、金錢、風險）	「我需要解決這個。」
解決方案	用一句話介紹產品/想法作為解決方案	「哦——這樣就解決了。」
運作方式	用1–3個具體步驟說明機制	「我明白它是怎麼做到的。」
成果 / 行動呼籲	未來狀態 + 一個下一步行動	「我想要那個。我會做X。」

（下方的「腳本公式」表格將這些階段對應到運行時間佔比和字數預算——本節是為什麼和順序；該表格則是多長。）

選擇一個類比並貫徹到底

抽象機制如果能映射到觀眾已知的事物，理解起來就容易得多。選擇一個單一隱喻並在場景間保持一致——中途切換類比會讓理解度歸零。

• 從觀眾的世界（排隊、恆溫器、組裝線）而非工程領域選擇隱喻。
• 每部影片只用一個隱喻；同時用於視覺語言和旁白措辭。
• 測試它：如果類比本身還需要解釋，那就是錯誤的選擇。

每個節拍的節奏

節奏跟隨緊張感。快速通過問題/利害關係以抵達價值；在「如何」上放慢速度，讓每個步驟深植人心；讓成果有呼吸的空間。

節拍	感覺	剪輯節奏
問題 / 利害關係	輕快、略帶緊張	較快的剪輯、短暫停留
解決方案	一個放鬆的節拍	一個清晰的停頓
運作方式	從容、一步一步來	最慢——停留每個步驟以便閱讀
成果 / 行動呼籲	自信、開放	停留結尾卡；一個行動呼籲

管線

1. 腳本 — 一個核心訊息。結構：問題 → 解決方案 → 運作方式 → 成果。撰寫精簡的旁白（VO）；以每秒約2.3字（≈每分鐘140字）計時。60秒影片約138字。
2. 分鏡 — 每個場景一個想法。草繪每個畫面及其轉場；將每句旁白對應到一個視覺。
3. 建置場景 — 動畫化圖表/數據、動態文字/關鍵字與背景（技巧內嵌於下方）。
4. 旁白與字幕 — 錄製/生成旁白，將場景剪輯對齊旁白節拍，燒錄字幕（大部分播放是靜音的）。
5. 剪輯 — 按照旁白剪輯，讓每個想法停留足夠時間，移除任何不推進訊息的場景。
6. 潤色 — 色彩校正、一致的緩動、音訊混音、結尾卡。

腳本公式

節拍	任務	運行時間佔比
問題	說出觀眾感受到的痛點	~20%
解決方案	介紹產品/想法作為解決方案	~15%
運作方式	展示機制，1–3個具體步驟	~45%
成果	結果 + 一個明確的下一步（行動呼籲）	~20%

先用口語（縮寫、短句）撰寫旁白。在建置任何東西之前，大聲朗讀並計時。

旁白計時數學

• 節奏：清晰友好的旁白約每秒2.3字（每分鐘140字）；技術性較高的台詞放慢至每秒2.0字。
• 根據旁白台詞估算場景長度：秒數 = 字數 / 2.3，然後加入約0.4秒的呼吸空間。
• 沒有旁白的場景（純視覺節拍）仍需至少1.0秒讓觀眾留下印象。

場景建置技巧（內嵌）

圖表 / 資料揭示（漸進式揭露：節點 → 邊 → 標籤）：

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

動態關鍵字（文字在重音節拍上彈入）：

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

計數統計：

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

使用 Remotion（資料驅動、確定性）或 After Effects 渲染組裝好的片段。

字幕同步

字幕是強制的——假設靜音自動播放。使用對應旁白的 .srt/.vtt 提示列表。保持 ≤2 行，每行 ≤42 個字元，螢幕上停留 ≥1.0 秒，在下一行開始前消失。

1
00:00:00,300 --> 00:00:02,600
手動管理發布很慢。

2
00:00:02,800 --> 00:00:05,400
Shipfast 自動化整個管線。

在 Remotion 中，使用與場景剪輯相同的時間陣列驅動字幕，這樣它們永遠不會漂移。

風格系統一致性

在建立場景2之前，鎖定一個字級系統、一個色彩語法（色彩 = 意義，永不重新賦予）、以及一個緩動曲線。在場景間重複使用相同的進場/出場轉換，讓片段感覺像一個整體，而不是一堆實驗的拼湊。視覺必須說明當前正在朗讀的旁白台詞——展示，而不是裝飾。

輸出檢查清單

• 單一清晰的訊息；每個場景都推進它。
• 旁白已計時（~2.3字/秒）；場景長度從旁白推導。
• 分鏡將每句旁白對應到一個視覺。
• 字幕已燒錄/可用；≤2行，可讀。
• 所有場景間一致的字型/色彩/動態系統。
• 結尾卡帶有一個清晰的行動呼籲。

交付與驗證（渲染靜止幀 → MP4）

打包輔助工具（scripts/）：使用 scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png 拼接靜止幀，然後使用 scripts/probe-mp4.sh out.mp4 [WxH] [fps] 驗證編碼。詳見 scripts/README.md。

組裝好的解說影片是一個 Remotion 組合——幀確定性，因此任何確切幀數都可以在無需尋找掛鉤的情況下無頭渲染。當交付物是帶有內嵌旁白和燒錄字幕的 MP4/GIF 時，使用此層級；對於單一網頁場景，改為交付獨立的 HTML。

輸出合約：

• 一個 Remotion 專案，包含已註冊的組合（<Composition> + zod schema + defaultProps），所有動畫皆由幀驅動（無計時器 / Date.now() / Math.random()）。
• 交付物 = 渲染後的 out/*.mp4（加上專案，以便旁白/腳本/資料可以重新渲染）。
• 透過 <Audio src={staticFile()}> 實現旁白；旁白/場景時間記錄在 props 中（渲染時沒有即時音訊）。字幕由同一個時間陣列驅動，因此永遠不會漂移。
• 時長取決於資料？在 calculateMetadata 中計算，不要手動計算。

驗證迴圈 — 渲染靜止幀 → 檢查 → 編碼。 先渲染單一幀（便宜，無需編碼），檢查它們，只在幀正確後才進行編碼。

# 在開始/中間/結尾的精確靜止幀 — 使用 SHIPPED props 渲染，而不僅僅是預設值
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# 檢查：腳本→分鏡→場景對應到幀 — 在每個場景的停留時間內取樣一幀，
# 確認旁白台詞和字幕在該幀上與視覺同步，沒有文字溢出或超出畫布。

# 只有在靜止幀檢查通過後，才進行編碼：
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions 讀取 durationInFrames/fps 以選取結束幀和每個場景的停留幀。
• 免費的 README 示範 GIF：npx remotion render Explainer out/demo.gif --codec=gif。

完成之前：

1. npx remotion still 在第0幀、每個場景停留時間內的某一幀以及最後一幀都能乾淨渲染——沒有錯誤，沒有缺少的資產/字型。
2. 在每個取樣的場景幀中，字幕和朗讀的旁白台詞與螢幕上的視覺相符（無漂移）。
3. 字幕位於安全區域內，≤2行，可讀；文字準確且未被截斷。
4. 僅由幀驅動——無 Date.now() / Math.random() / 計時器；已發佈的 props 正確渲染（不僅僅是 defaultProps）。
5. 完整 MP4 已編碼並可播放旁白；（可選）GIF 已為 README 渲染。

參考檔案

• references/script-to-screen-workflow.md — 完整管線細節：問題→解決方案→運作方式→成果的腳本公式，附有工作範例和字數預算、旁白計時表、可填空的分鏡範本（含時間碼）、每個場景的建置檢查清單、字幕編寫指引（VTT/SRT），以及跨場景一致性的風格系統規格表。