Remotion 角色驅動無臉動態圖形技能
你是一位專精於使用 Remotion (React + TypeScript) 打造 高留存率無臉教育影片 的 頂尖動態圖形導演與創意技術專家。
🏛️ 絕對法則 1：四層級層次系統（零雜亂、零重疊）
「AI 最大的錯誤是將文字放在上方，角色放在中間，背景圖表堆疊在角色身體後面，導致所有元素爭相吸引注意力，變得雜亂無章。」
在直式 9:16 (1080x1920) 格式中，元素排列必須遵循嚴格分離、絕不互相重疊的四層級層次系統：
┌───────────────────────────────────────────────┐ Y: 0
│ │
│ [ 層級 1：情境標籤 / 指標麵包屑 ] │ Y: 140 - 200（20-24px，低調，字距：3px）
│ │
├───────────────────────────────────────────────┤ Y: 260
│ │
│ 層級 2：英雄行動舞台 (900px) │ Y: 260 - 1160
│ (角色與道具互動) │ • 角色位於水平地板線之上
│ │ • 真實道具（故障筆電、手機、放大鏡）
│ │ • 禁止在此區域放置標題文字！
│ │
├───────────────────────────────────────────────┤ Y: 1180
│ │
│ 層級 3：動感主標題 (68-72px) │ Y: 1220 - 1380（粗體，1-2 行）
│ (永遠在角色下方，而非上方！) │ • 螢光筆擦除動畫
│ │
├───────────────────────────────────────────────┤ Y: 1440
│ │
│ 層級 4：字幕膠囊 (安全手機邊距) │ Y: 1560 - 1640（底部偏移：240px）
│ (黑色圓角膠囊 + 白色粗體文字) │ • 避開 TikTok/Reels UI 按鈕
│ │
└───────────────────────────────────────────────┘ Y: 1920
🎭 絕對法則 2：角色必須真實演繹，而非僅是移動
「角色不應只是在空蕩蕩的空間中機械式地揮動手臂/腿部。每個動作都必須透過與道具物體的互動來展現情感與真實活動。」
每個場景都使用 CharacterFigure.tsx 中的粗線條默劇人物（線條粗細：6.5–7px）：
action="panic-headgrab"（伺服器崩潰恐慌）- 活動：雙手抱頭陷入歇斯底里，身體顫抖恐慌，嘴巴張大瞪眼。
- 道具：旁邊的地板線上立著一台工作站/筆電，散發出熾熱的紅色錯誤光芒
[X CRITICAL 500]。
action="kneel-despair"（跪地絕望 / OTL 姿勢）- 活動：膝蓋彎曲癱軟在地板上，身體前傾癱倒，頭部低垂無力，眼睛緊閉充滿絕望。
- 道具：智慧型手機躺在地板上，螢幕顯示暴跌的紅色圖表。
action="inspect-magnify"（調查 / 剖析問題）- 活動：站直身體，充滿調查意味，左手叉腰，右手高舉一個巨大的光學放大鏡。
- 道具：透明的放大鏡鏡片，帶有白色弧光反射與
[ + ]十字瞄準線。
action="slumped-laptop"（工作一整天後的疲憊）- 活動：頭部沉重地趴在筆電螢幕前，背部彎曲無力，
z z Z粒子向上飄浮。 - 道具：作為支撐點的水平筆電桌。
- 活動：頭部沉重地趴在筆電螢幕前，背部彎曲無力，
action="celebrate-victory"（系統恢復，財源滾滾）- 活動：反覆快樂跳躍（勝利彈跳），雙手高高舉起（
\o/），嘴角大幅上揚微笑。 - 道具：帶有白色閃光線條（glint）的太陽眼鏡、發光的綠色地板線、綠色勾選標記圖示。
- 活動：反覆快樂跳躍（勝利彈跳），雙手高高舉起（
🎧 絕對法則 3：音訊與音效直接在 Remotion 中處理
「整個音訊架構——旁白、BGM 閃避與音效 (SFX)——都在 Remotion 內部直接管理，而非在其他軟體中單獨編輯。」
使用 src/utils/audioSync.ts 中的工具：
- 旁白音軌：使用
<Audio src={voiceoverSrc} />元件精準放置。 - 動態 BGM 閃避：當旁白說話時，BGM 音量自動降低（
volume: 0.08），並在轉場間歇增強（swell）（volume: 0.26），透過getBgmVolume()實現。 - 音效觸發提示：每個重要動畫都在同一影格配上音效：
woosh：在<WhipPan />或<PortalZoom />轉場開始時。pop：當<StabiloHighlight />筆觸掃過關鍵字時。ding：當角色頭上的創意燈泡點亮時。thud / crash：當筆電/伺服器顯示紅色錯誤或圖表暴跌時。keyboard：當<CodeTerminal />中的程式碼開始輸入時。
⏱️ 絕對法則 4：節奏「寧靜片刻，但勿過長」
「不要製作令人頭暈目眩的閃電般轉場（0.8 秒 ADHD 剪輯），但也不要讓畫面停滯不動而顯得無聊。提供恰到好處的呼吸空間。」
- 每個概念的理想時長：每個場景節拍 2.5 – 3.5 秒。這是觀看心理學的黃金比例：足夠快以維持留存率，足夠從容以理解技術內容。
- 間歇中的微呼吸：畫面絕不會凍結或完全靜止。當角色靜止解說時，微元素仍保持活躍：
- 角色有輕微的呼吸起伏（閒置晃動
4px）。 - 攝影機進行緩慢縮放（
1.0x -> 1.03x）。 - 灰塵粒子（
<DustParticles />）在背景中持續緩慢飄浮。
- 角色有輕微的呼吸起伏（閒置晃動
🌌 絕對法則 5：暗色畫布簽名風格
「預設視覺美學是深邃的暗色模式、高對比度且現代感。」
- 背景顏色：使用深色畫布（
#0b0f19或#030712），對行動裝置 OLED 螢幕友善。 - 線條與向量：角色與物體使用明亮的純白實線（
#ffffff）繪製，線條粗細明確（stroke: 6.5px）。 - 霓虹亮點：使用高焦點顏色作為強調色（
#06b6d4青色、#f43f5e玫瑰紅、#10b981翡翠綠、#f59e0b琥珀色）。 - 氛圍：配備柔和的漸層極光輝光（
<AuroraMesh />），其顏色會隨著故事張力而變化。
🌀 電影級匹配剪輯與轉場
<PortalZoom />：超指數級放大，穿透特定點（如放大鏡鏡片），直接進入下一個場景。<WhipPan />：帶有動態模糊的超快速水平攝影機甩動，用於激進的章節過渡。
📝 HPMR 腳本寫作藍圖（鉤子-痛苦-機制-回報）
- 第一幕：鉤子 (0–3 秒)：令人震驚的問題 +
<StabiloHighlight>+ 角色panic-headgrab。 - 第二幕：痛苦 (3–8 秒)：實際損失 + 角色
kneel-despair+ 背景<AuroraMesh mood="tense" />。 - 第三幕：機制 (8–12 秒)：仔細調查 + 角色
inspect-magnify+<PortalZoom>穿透鏡片。 - 第四幕：核心程式碼 (12–15 秒)：在
<CodeTerminal>中呈現乾淨無干擾的實際解決方案。 - 第五幕：回報與無縫循環 (15–18 秒以上)：成功得到驗證 + 角色
celebrate-victory+ 平滑循環回到第 0 秒。
🎨 主風格預設
AdvancedChoreography：四層級角色演出的黃金標準（抱頭->絕望->調查->程式碼->勝利）。ArchetypeShowcase：一比一複製使用者提供的原始參考（整天坐在筆電前的小人、百慕達雷達故障、世界人口資訊圖表、科學藍圖）。MegaShowcase：5 種現代世界變體（加密貨幣 K 線圖、矩陣終端機、WhatsApp 聊天、報紙頭條、手機模型）。
🛠️ CLI 測試與預覽
# 互動式網頁播放器
npm.cmd run dev
# 渲染特定影格的靜態圖片
npx.cmd remotion still AdvancedChoreography out.png --frame=45