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つのトピック文を入力 → 完全な「レンバー・コンタク」、ストーリーボード、オーディオ/SFXスクリプト、Remotion + Three.js コードを出力）

使用するタイミング

• ユーザーが1文のトピックまたは質問を提供した場合（例：「なぜエスプレッソマシンには9バールの圧力が必要なのか？」、「電動自転車のバッテリーの仕組みを分解する」）、完全な解説動画またはインタラクティブなスタジオプレビューを求めている。
• ユーザーが再利用可能なビジュアル/3Dオブジェクトライブラリ、爆発分解アニメーション（TAKEN APART スタイル）、または Remotion のシリーズテンプレートを構築または拡張したいと考えている。
• ユーザーがストーリーボード、アセットコンタクトシート（「レンバー・コンタク」）、ナレーションスクリプト、または60秒、90秒、120秒の動画向けの edge-tts + SFX 統合を求めている。

---

⚡ Remotion + Three.js の3つの黄金ルール

このスキルを使用してコードを実装または生成する際は、以下を厳守してください。

1. 決定論的フレームアニメーション（useFrame 内で delta を使用しない）: Three.js フックで delta や requestAnimationFrame アキュムレータを決して使用しないでください。すべての回転、変換、シェーダーユニフォームは、frame = useCurrentFrame() の純粋な決定論的関数でなければなりません。references/remotion-composition-rig.md を参照してください。
2. <Series> による動的なオーディオ同期: 音声ナレーションの長さは、AI音声合成（edge-tts）によって動的に変化します。シーンのフレーム長をハードコードしないでください。常に timeline.json から 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（エディトリアルコンタクトシートと Three.js の爆発分解直交投影図を組み合わせたもの）を使用します。詳細なトークンは references/threejs-exploded-rig.md を参照してください。

1. taken-apart-blueprint（3D爆発分解テクニカルアナトミー）

   • 美学: 温かみのあるクリーム色のアーカイブペーパー（#F2EFE9）、鮮明なテクニカルインクの輪郭（#1E2022）、直交等角投影 Three.js カメラ、エッジ検出アウトラインパスを使用したカスタム Cel/トゥーンシェーダー。
   • HUDフレーム: コーナーレジストレーションマーク、上部メタデータ（Fig 1、ANATOMY · [オブジェクト名]）、下部テレメトリ（TAKEN APART、[X] パーツ · [Y] アセンブリ）。
   • タイポグラフィ: 表示用セリフ/サンセリフヘッダー + テクニカルラベル用の JetBrains Mono 大文字トラッキング。

2. joni-bongkar-cutaway（エディトリアルカットアウェイ + コードUIカード）

   • 美学: 温かみのあるオフホワイト（#F5F2EB）、等角投影断面カットアウェイイラスト + 鮮明なデータUIカード（KARTU UI）、セマンティック パレットマテリアル 凡例、ピルハイライトサブタイトル（#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）のパラメトリックグループとして構築され、explodeOffset: [x, y, z] と materialKey を持ち、episode.schema.json に準拠します。

• <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. セマンティックパレットマテリアル

すべてのオブジェクトパーツは、任意の色ではなくセマンティックマテリアルキーにマッピングされます。

• 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枚のレンバー・コンタクパネル（6枚の3D/カットアウェイ + 3枚のUIカード）| 16キーフレーム（10 AKSI、4 JEDA、2 FOKUS）。
• 90秒モード（標準ディープダイブ — 約200語）: 10～11枚のレンバー・コンタクパネル | 20～22キーフレーム（13 AKSI、5 JEDA、4 FOKUS）。顕微鏡的/内部サブアセンブリの爆発とサイドバイサイドの故障シミュレーションを追加。
• 120秒モード（完全ドキュメンタリーブレイクダウン — 約280語）: 12枚のレンバー・コンタクパネル | 24～28キーフレーム（16 AKSI、6 JEDA、6 FOKUS）。複数原因のフォレンジックブレイクダウン、長期劣化曲線、3ステップの実行可能な解決策カードを追加。

ストーリーボードの各キーフレームは、以下を指定する必要があります。

1. timeSec とリズムタグ（AKSI グリーン、FOKUS アンバー、JEDA ニュートラル）。
2. narration: パンチの効いたインドネシア語解説散文。1文あたり1～2の焦点単語に [[highlight]] タグを付ける。
3. rigState: 3D/2Dシーンを駆動する宣言的パラメータ。
   • explodeFactor: 0.0（組み立て状態）から 1.0（完全爆発状態）。
   • xrayClip: 0.0（固体シェル）から 1.0（完全内部カットアウェイ）。
   • cameraPose: [azimuth, elevation, zoom] またはプリセット（`