farizziezhi/remotion-architect

Remotion Explainer Architect Pro（v2 — 系統與 3D 系列引擎）

這是一個系統驅動的生產引擎，用於在 Remotion + Three.js (@remotion/three) 中建立高留存率的解說動態圖形系列。此技能不依賴於每個影片的隨機提示，而是強制執行一個5 大支柱可重複使用生產系統：

1. 可重複使用的視覺與 3D 物件庫（Three.js 程序化圖元、爆炸視圖組合與 2D UI 卡片）
2. 音訊優先的故事板與旁白結構（AKSI / FOKUS / JEDA 場景區塊 + 單詞級別高亮標記）
3. 鎖定的主題與視覺方向預設（字體排印學、語意材質調色盤、著色器、攝影機鏡頭）
4. 宣告式動畫裝備（useExplodeRig、useXRayClip、useFlowParticles、useCameraChoreography）
5. 一句話可重複使用工作流程（輸入 1 句主題 -> 輸出完整的 Lembar Kontak、故事板、音訊/SFX 腳本與 Remotion + Three.js 程式碼）

使用時機

• 使用者提供一句話的主題或問題（例如，"Kenapa mesin espresso butuh tekanan 9 bar?"、"Bongkar cara kerja baterai sepeda listrik"）並想要一個完整的解說影片或互動式工作室預覽。
• 使用者想要建立或擴充可重複使用的視覺/3D 物件庫、爆炸解剖動畫（TAKEN APART 風格）或 Remotion 中的系列範本。
• 使用者要求為 60、90 或 120 秒的影片提供故事板、資產聯繫表（"Lembar Kontak"）、旁白腳本或 edge-tts + SFX 整合。

---

⚡ Remotion + Three.js 的 3 條黃金法則

使用此技能實作或產生程式碼時，請嚴格執行：

1. 確定性幀動畫（useFrame 中零 delta）： 永遠不要在 Three.js 掛鉤中使用 delta 或 requestAnimationFrame 累加器。所有旋轉、變換和著色器 Uniform 必須是 frame = useCurrentFrame() 的純確定性函數。請參閱 references/remotion-composition-rig.md。
2. 透過 <Series> 進行動態音訊同步： 旁白音訊長度會隨著 AI 語音合成（edge-tts）而動態變化。永遠不要為場景硬編碼固定的幀持續時間。始終根據 timeline.json 計算 <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}>。
3. 爆炸視錐體與長寬比適應性： 當 explodeFactor 達到 1.0 時，外圍元件會向外擴展。攝影機縮放必須動態調整（interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])），以防止零件在畫面外被裁切。必須同時支援 16:9（1920x1080）和 9:16（1080x1920 TikTok/Reels）。

---

支柱 1：主題與視覺方向預設（theme.config.ts）

始終在開始時鎖定視覺方向。如果使用者未指定樣式，則預設為 taken-apart-blueprint（結合編輯聯繫表與 "Taken Apart" Three.js 爆炸正投影解剖）。請參閱 references/threejs-exploded-rig.md 中的詳細標記。

1. taken-apart-blueprint（3D 爆炸技術解剖）

   • 美學： 暖奶油色檔案紙張（#F2EFE9）、清晰技術墨線（#1E2022）、正投影等角 Three.js 攝影機、帶有邊緣偵測輪廓通道的自訂 Cel/Toon 著色器。
   • HUD 框架： 角落註冊標記、頂部元資料（Fig 1、ANATOMY · [OBJECT NAME]）、底部遙測資料（TAKEN APART、[X] parts · [Y] assemblies）。
   • 字體排印學： 展示襯線/無襯線標題 + 用於技術標籤的 JetBrains Mono 大寫追蹤。

2. joni-bongkar-cutaway（編輯剖視 + 程式碼 UI 卡片）

   • 美學： 暖米白色（#F5F2EB）、等角剖面剖視插圖 + 清晰的資料 UI 卡片（KARTU UI）、語意 Palet Material 圖例、藥丸型高亮字幕（#1E8E5A 綠色 / #E87A24 橘色）。

3. zackd-cgi（ZackD Films 3D 宏觀飛越）

   • 美學： 平滑的 PBR 工作室燈光、透視攝影機、透過內部機械腔室進行激進的宏觀縮放、即時 Three.js ClippingPlane 橫截面、柔和環境光遮蔽。

4. dan-koe-glow / glow-sketch（極簡高對比度賽博/心智模型）

   • 美學： 深黑曜石虛空（#07080C）、發光向量線框與霓虹 Three.js 線條幾何體（#38BDF8、#A855F7）、動態點陣網格。

5. comic-vector（流行墨線與半色調風格）

   • 美學： 高對比度粗墨線輪廓（#09090B）、鮮豔的平面顏色填充、半色調點覆蓋、動態漫畫衝擊動作線。

---

支柱 2：可重複使用的視覺與 3D 物件庫（assets/library.ts）

每一集都從一個模組化目錄中提取並貢獻回去，該目錄包含可重複使用的 3D 組合（@remotion/three / Three.js）和 2D UI 卡片：

A. Three.js 程序化 3D 組合（<ThreeCanvas />）

每個 3D 物件都建置為一個參數化群組，包含命名的子網格（parts & assemblies），並帶有遵循 episode.schema.json 的 explodeOffset: [x, y, z] 和 materialKey：

• <CylinderCellAssembly />：外殼、螺旋電極核心、隔離膜、頂部陽極蓋、排氣閥（電池、電容器、鍋爐、活塞）。
• <FluidPumpAndBoiler3D />：水箱、銅加熱線圈、高壓鍋爐缸體、手柄/噴嘴、壓力計、滴水盤（濃縮咖啡機、液壓系統、冷卻迴路）。
• <CircuitPCBModule3D />：玻璃纖維板、MOSFET/IC 晶片、銅走線路徑、LED 指示燈、連接器電纜（BMS、智慧型手機、IoT、電源供應器）。
• <EnclosureShell3D />：頂蓋、側面板、內部機箱框架，支援自動 clipPlane 或 explodeFactor。

B. 可重複使用的 2D 程式碼 UI 卡片（KARTU UI）

• <ThreeStageFlowCard />：3 欄進度卡（例如，DERAS -> MELAMBAT -> BERHENTI），底部帶有動畫當前/進度條。
• <ComparisonVerdictCard />：並排指標對決（80% vs 96%、SEHAT vs DIPAKSA），帶有動畫計數器和勝者/敗者徽章。
• <MythStampCard />：核取方塊摘要 + 彈簧物理橡皮圖章（MITOS / FAKTA / AMAN）。

C. 語意 Palet Material

每個物件部分都對應到一個語意材質鍵，而不是任意顏色：

• shell（#B8BCC2 灰色機身）
• structural（#2B2E33 塑膠/鐵炭灰色）
• core_component（#3B6EE8 技術藍色）
• control_bms（#1E8E5A 保全/安全綠色）
• medium_fluid（#E8D882 液體/電解質黃色）
• hazard_heat（#E87A24 熱/銅橘色）
• energy_current（#F5C400 電流黃色）

---

支柱 3：持續時間模式與故事板節奏（episode.schema.json）

支援 3 種鎖定的持續時間層級（如果未指定，預設為 90 秒）：

• 60 秒模式（快速解說 — 約 140 字）： 9 個 Lembar Kontak 面板（6 個 3D/剖視 + 3 個 UI 卡片）| 16 個關鍵影格（10 個 AKSI、4 個 JEDA、2 個 FOKUS）。
• 90 秒模式（標準深入探討 — 約 200 字）： 10-11 個 Lembar Kontak 面板 | 20-22 個關鍵影格（13 個 AKSI、5 個 JEDA、4 個 FOKUS）。添加微觀/內部子組合爆炸和並排故障模擬。
• 120 秒模式（完整紀錄片分解 — 約 280 字）： 12 個 Lembar Kontak 面板 | 24-28 個關鍵影格（16 個 AKSI、6 個 JEDA、6 個 FOKUS）。添加多重元兇法醫分解、長期退化曲線和 3 步驟可行解決方案卡片。

故事板中的每個關鍵影格必須指定：

1. timeSec 和節奏標籤（AKSI 綠色、FOKUS 琥珀色、JEDA 中性）。
2. narration：簡潔有力的印尼語解說散文，每個句子在 1-2 個焦點詞彙周圍帶有 [[highlight]] 標籤。
3. rigState：驅動 3D/2D 場景的宣告式參數：
   • explodeFactor：0.0（組裝）到 1.0（完全爆炸）。
   • xrayClip：0.0（實心外殼）到 1.0（完整內部剖視）。
   • cameraPose：[azimuth, elevation, zoom] 或預設（"iso-wide"、"macro-core"、"top-down"）。
   • activeCallouts：要彈出並帶有引導線的元件標籤陣列。
   • sfxCue：聲音觸發（whoosh_xray、servo_explode、ui_pop、electric_hum、verdict_stamp）。

---

支柱 4：宣告式動畫裝備（Remotion + Three.js）

永遠不要逐幀手動動畫網格。將 useCurrentFrame() 和 timeline.json 時間戳綁定到這些核心裝備：

1. useExplodeRig(frame, triggerFrame, partOffsetVector)： 使用 spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }) 沿軸向向量平滑分離 3D 子組合，同時更新 HUD 零件計數器。
2. useXRayClip(frame, startFrame, endFrame)： 插值 Three.js THREE.Plane 裁切常數或 SVG clip-path，以切開外殼（UTUH -> TEMBUS PANDANG）。
3. useFlowParticles(frame, speed, pathPoints)： 沿內部管道對實例化 3D 球體或 SVG 虛線筆畫進行動畫，以視覺化電力、水壓、熱量或氣泡。
4. useWordSyncSubtitles(frame, words)： 讀取 edge-tts WordBoundary 時間戳，以即時高亮口語單詞，並在精確的關鍵字影格上觸發 <CalloutBadge /> 彈出視窗。

---

支柱 5：一句話可重複使用工作流程（交付成果）

當使用者給出一句話的主題（或要求建置/預覽一集）時，自動執行完整管線：

1. Lembar Kontak（9-12 個資產藍圖 + Palet Material + 3D 零件計數）： 定義可重複使用的 3D 組合（X parts · Y assemblies）、AI 剖視提示和程式碼 UI 卡片。
2. 關鍵影格故事板（16-28 個影格，帶有 AKSI / FOKUS / JEDA）： 完整的帶時間戳腳本，包含 [[highlight]] 標記、攝影機編舞以及根據 episode.schema.json 的 explodeFactor / xrayClip 狀態。
3. 音訊與 SFX 編譯： 執行 scripts/generate_voice_and_sfx.py 以合成：
   • voiceover.mp3（id-ID-ArdiNeural / id-ID-GadisNeural）
   • 程序化 WAV SFX（servo_explode.wav、whoosh_xray.wav、ui_pop.wav、electric_hum.wav、verdict_stamp.wav）
   • timeline.json（映射的字邊界 + 影格索引）。
4. 互動式工作室 / Remotion + Three.js 專案： 提供遵循 references/remotion-composition-rig.md 的即可執行 @remotion/three 合成。