Remotion 解释器架构师 Pro (v2 — 系统与 3D 系列引擎) 是做什么的？

一个系统驱动的生产引擎，用于在 Remotion + Three.js (@remotion/three) 中构建高留存率的解释器动态图形视频系列。该技能不依赖每个视频的临时提示，而是强制执行一个 5 支柱可复用生产系统：

可复用视觉与 3D 对象库（Three.js 程序化基元、分解视图组件和 2D UI 卡片）
音频优先的故事板与旁白模式（AKSI / FOKUS / JEDA 场景块 + 词级高亮标记）
锁定的主题与视觉方向预设（字体、语义材质调色板、着色器、相机镜头）
声明式动画装备（useExplodeRig、useXRayClip、useFlowParticles、useCameraChoreography）
一句话可复用工作流（输入 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 条黄金法则

在使用此技能实现或生成代码时，严格执行：

确定性帧动画（在 useFrame 中零 delta）：切勿在 Three.js 钩子中使用 delta 或 requestAnimationFrame 累加器。所有旋转、变换和着色器统一变量必须是 frame = useCurrentFrame() 的纯确定性函数。请参阅 references/remotion-composition-rig.md。
通过 <Series> 实现动态音频同步：旁白音频持续时间随 AI 语音合成（edge-tts）动态变化。切勿对场景的固定帧持续时间进行硬编码。始终从 timeline.json 计算 <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}>。
分解平截头体与宽高比适应性：当 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。

taken-apart-blueprint (3D 分解技术解剖)
- 美学： 暖奶油色档案纸 (#F2EFE9)，清晰的技术墨线 (#1E2022)，正交等轴 Three.js 相机，自定义卡通着色器，带边缘检测轮廓通道。
- HUD 框架： 角落注册标记，顶部元数据（Fig 1、ANATOMY · [OBJECT NAME]），底部遥测数据（TAKEN APART、[X] parts · [Y] assemblies）。
- 排版： 显示衬线/无衬线标题 + JetBrains Mono 大写跟踪用于技术标签。
joni-bongkar-cutaway (编辑剖面图 + 代码 UI 卡片)
- 美学： 暖米色 (#F5F2EB)，等轴截面剖切插图 + 清晰的 UI 数据卡片（KARTU UI），语义 Palet Material 图例，药丸高亮字幕（#1E8E5A 绿色 / #E87A24 橙色）。
zackd-cgi (ZackD 风格 3D 宏观飞穿)
- 美学： 平滑的工作室 PBR 光照，透视相机，带有通过内部机械腔室的激进宏观缩放，实时 Three.js ClippingPlane 横截面，柔和的屏幕空间环境光遮蔽。
dan-koe-glow / glow-sketch (极简高对比度赛博/心理模型)
- 美学： 深黑曜石虚空 (#07080C)，发光的矢量线框和霓虹 Three.js 线几何体 (#38BDF8、#A855F7)，动态点阵网格。
comic-vector (流行墨水与半色调风格)
- 美学： 高对比度粗墨水轮廓 (#09090B)，鲜艳平涂填充，半色调点覆盖，动态漫画冲击动作线。

支柱 2：可复用视觉与 3D 对象库 (`assets/library.ts`)

每个剧集都从模块化的可复用 3D 组件（@remotion/three / Three.js）和 2D UI 卡片目录中提取，并为其做出贡献：

A. Three.js 程序化 3D 组件 (`<ThreeCanvas />`)

每个 3D 对象都构建为一个参数化的命名子网格组（parts & assemblies），带有 explodeOffset: [x, y, z] 和遵循 episode.schema.json 的 materialKey：

<CylinderCellAssembly />：外壳、螺旋电极芯、隔膜、顶部阳极帽、排气阀（电池、电容器、锅炉、活塞）。
<FluidPumpAndBoiler3D />：水箱、铜加热线圈、高压锅炉缸体、冲煮手柄/喷嘴、压力表、滴水盘（咖啡机、液压系统、冷却回路）。
<CircuitPCBModule3D />：玻璃纤维板、MOSFET/IC 芯片、铜走线路径、LED 指示灯、连接线缆（BMS、智能手机、物联网、电源）。
<EnclosureShell3D />：顶盖、侧面板、内部底盘框架，支持自动 clipPlane 或 explodeFactor。

B. 可复用 2D 代码 UI 卡片 (`KARTU UI`)

<ThreeStageFlowCard />：三列进度卡（例如，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 步可操作解决方案卡。

故事板中的每个关键帧必须指定：

timeSec 和 节奏标签（AKSI 绿色、FOKUS 琥珀色、JEDA 中性）。
narration：有力的印尼语解释器散文，每句在 1-2 个焦点词周围带有 [[highlight]] 标签。
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 时间戳绑定到这些核心装备：

useExplodeRig(frame, triggerFrame, partOffsetVector)：使用 spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }) 沿轴向向量平滑分离 3D 子组件，同时更新 HUD 部件计数器。
useXRayClip(frame, startFrame, endFrame)：插值 Three.js THREE.Plane 裁剪常数或 SVG 裁剪路径以剖开外壳（UTUH -> TEMBUS PANDANG）。
useFlowParticles(frame, speed, pathPoints)：沿内部管道动画实例化 3D 球体或 SVG 虚线以可视化电流、水压、热量或气泡。
useWordSyncSubtitles(frame, words)：读取 edge-tts WordBoundary 时间戳以实时高亮正在说的词，并在精确的关键词帧触发 <CalloutBadge /> 弹出。

支柱 5：一句话可复用工作流 (交付物)

当用户给出 一个单句主题（或要求构建/预览一集）时，自动执行完整流程：

Lembar Kontak (9-12 个资源蓝图 + Palet Material + 3D 部件计数)： 定义可复用的 3D 组件（X parts · Y assemblies）、AI 剖切提示和代码 UI 卡片。
关键帧故事板 (16-28 个帧，带有 AKSI / FOKUS / JEDA)： 完整的时间戳脚本，带有 [[highlight]] 标记、相机编排和根据 episode.schema.json 的 explodeFactor / xrayClip 状态。
音频与 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（映射词边界 + 帧索引）。
交互式工作室 / Remotion + Three.js 项目： 提供遵循 references/remotion-composition-rig.md 的可立即运行的 @remotion/three 合成。

Remotion 解释器架构师 Pro (v2 — 系统与 3D 系列引擎)