MrIago/whiteboard-explainer-video

白板解說影片

一塊白板在旁白說話的同時繪製。觀眾離開時，腦中擁有完整的地圖。

讓這個風格成功的關鍵（不可省略）：

• 所有畫面都在語音提到時才繪製。沒有預先出現的元素。
• 單一畫板：鏡頭移動，已經解釋過的內容保留在原地。
• 最終拉遠鏡頭顯示完整畫板，成為影片的視覺總結。這只有在事先規劃好地圖時才有效。
• 如果有真實的應用程式或物品，在繪製的視窗內嵌入螢幕錄影，可以證明繪圖的真實性。

SD 代表此技能的資料夾。指令：node "$SD/scripts/..."。

開始之前

1. node "$SD/scripts/config.mjs"。如果沒有 API 金鑰，向使用者索取其中一種並儲存（不要在工作階段中重複顯示值）：
   • OpenRouter（openrouter.ai/keys），可提供語音與轉錄功能：node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=...
   • ElevenLabs（elevenlabs.io/app/settings/api-keys）：node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
2. 需要 Node 20+ 與 ffmpeg。如果缺少任何項目，請說明如何在系統上安裝。
3. 開始建置前，先確認：主題、目標觀眾、長度、語言，以及影片需要傳達的關鍵訊息。當請求明確後，直接執行，無需再詢問。

生產流程

#	步驟	產出
1	node "$SD/scripts/new-project.mjs" <資料夾>	Remotion 專案
2	將腳本分成簡短段落，每個段落一個主題，不要使用人工編號	script/script.md
3	影片長度超過 1 分鐘：提供 3 個樣本（narrate.mjs <資料夾> --samples "第一句"）供使用者選擇。將選擇結果存入 script/voice.json。短測試使用預設值	語音
4	node "$SD/scripts/narrate.mjs" <資料夾>	public/audio/、src/data/narration.json
5	在 src/sections.ts 中將段落串聯起來	時間線
6	世界地圖：每個段落一個區域，按影片部分分組	常數 R_*
7	一次一個區域：繪製、對齊語音、使用靜態畫面檢查	src/scenes/*.tsx
8	鏡頭與結尾	src/Video.tsx
9	npx remotion studio src/index.ts 讓使用者觀看，如果需要審閱	ok
10	渲染片段、檢查、全片渲染、檢查、音量標準化	out/video.mp4

src/scenes/Example.tsx 只是一個範本：請刪除並根據主題繪製您的畫板。每個影片都有自己獨特的繪圖。

在步驟 6 之前閱讀 references/method.md。如果影片中包含螢幕錄影，也請閱讀 references/screens.md。

腳本

**s01**
段落的語音文字，單一段落。

• 使用口語化的句子，而非書面文字。標點符號要簡單：破折號和省略號會造成奇怪的停頓。
• 如果數字需要被朗讀，使用全形數字。
• 每個段落應該能轉換成一個繪圖。如果不行，請改寫。
• 如果影片需要長期有效，不要包含日期；每個數字都需要標明來源。

檢查：您無法觀看，所以請檢查畫面

npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <資料夾> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <資料夾>/out/video.mp4 24    # 印表機：檢查重複片段與重疊
node "$SD/scripts/qa.mjs" scan  <資料夾>/out/video.mp4       # 靜止秒數、黑畫面、閃爍畫面
node "$SD/scripts/qa.mjs" loud  <資料夾>/out/video.mp4       # 目標 -14 到 -16 LUFS，峰值最高 -1 dBTP

scan 測量視覺感受：如果靜止比例超過 5%，影片看起來會像幻燈片。在交付前修正，即使是在測試階段，也要加入更多每句的圖形元素與鏡頭變換；僅靠鏡頭呼吸效果仍算作靜止。

打開圖片。在沒有查看印表機與測量音訊之前，不要說「看起來不錯」。

只使用 useCurrentFrame 效果：CSS transition 與 animation 在渲染時無效。