farizziezhi/remotion-architect

Remotion Explainer Architect Pro (v2 — System & 3D Series Engine)

Ein systemgesteuertes Produktionssystem für die Erstellung erklärender Motion-Graphics-Videoreihen mit Remotion + Three.js (@remotion/three). Anstatt bei jedem Video auf Ad-hoc-Prompts zu setzen, erzwingt dieser Skill ein wiederverwendbares 5-Säulen-Produktionssystem:

1. Wiederverwendbare visuelle und 3D-Objektbibliothek (Three.js prozedurale Primitive, Explosionsdarstellungen und 2D-UI-Karten)
2. Audio-First-Storyboard- und Erzählschema (AKSI / FOKUS / JEDA-Szenenblöcke + hervorgehobene Wort-Tokens)
3. Festgelegte Themen- und visuelle Richtungsvorgaben (Typografie, semantische Materialpaletten, Shader, Kameraobjektive)
4. Deklarative Animations-Rigs (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography)
5. Ein-Satz-Workflow (Eingabe: 1 Themensatz -> Ausgabe: vollständiges Lembar Kontak, Storyboard, Audio/SFX-Skript und Remotion + Three.js-Code)

Verwendungshinweise

• Der Benutzer gibt ein Thema oder eine Frage in einem Satz (z. B. "Kenapa mesin espresso butuh tekanan 9 bar?", "Bongkar cara kerja baterai sepeda listrik") und wünscht ein komplettes Erklärvideo oder eine interaktive Studio-Vorschau.
• Der Benutzer möchte eine wiederverwendbare visuelle/3D-Objektbibliothek, eine Explosionsanatomie-Animation (TAKEN APART-Stil) oder eine Serienvorlage in Remotion erstellen oder erweitern.
• Der Benutzer bittet um ein Storyboard, eine Asset-Kontaktliste ("Lembar Kontak"), ein Erzählskript oder eine edge-tts + SFX-Integration für ein 60s, 90s oder 120s Video.

---

⚡ Die 3 Goldenen Regeln von Remotion + Three.js

Bei der Implementierung oder Codegenerierung mit diesem Skill sind diese Regeln strikt einzuhalten:

1. Deterministische Frame-Animation (Kein delta in useFrame): Niemals delta oder requestAnimationFrame-Akkumulatoren in Three.js-Hooks verwenden. Alle Rotationen, Transformationen und Shader-Uniforms müssen reine deterministische Funktionen von frame = useCurrentFrame() sein. Siehe references/remotion-composition-rig.md.
2. Dynamische Audiosynchronisation mittels <Series>: Die Dauer des Voiceover-Audios variiert dynamisch mit der KI-Sprachsynthese (edge-tts). Verwenden Sie niemals feste Framedauern für Szenen. Berechnen Sie <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}> immer aus timeline.json.
3. Explosionsfrustum und Seitenverhältnis-Anpassungsfähigkeit: Wenn explodeFactor 1.0 erreicht, bewegen sich äußere Komponenten nach außen. Der Kamera-Zoom muss dynamisch skaliert werden (interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])), um ein Abschneiden von Teilen außerhalb des Rahmens zu verhindern. Es müssen sowohl 16:9 (1920x1080) als auch 9:16 (1080x1920 TikTok/Reels) unterstützt werden.

---

Säule 1: Themen- und visuelle Richtungsvorgaben (theme.config.ts)

Legen Sie die visuelle Richtung immer zu Beginn fest. Wenn der Benutzer keinen Stil vorgibt, verwenden Sie standardmäßig taken-apart-blueprint (Kombination aus redaktionellen Kontaktbögen und "Taken Apart" Three.js-Explosionsorthografie). Siehe detaillierte Tokens in references/threejs-exploded-rig.md.

1. taken-apart-blueprint (3D-Explosionstechnische Anatomie)

   • Ästhetik: Warmes cremefarbenes Archivpapier (#F2EFE9), klare technische Tintenumrisse (#1E2022), orthografische isometrische Three.js-Kamera, benutzerdefinierter Cel/Toon-Shader mit Kantenerkennungs-Umriss-Pass.
   • HUD-Rahmen: Eckregistermarkierungen, obere Metadaten (Fig 1, ANATOMY · [OBJEKTNAME]), untere Telemetrie (TAKEN APART, [X] Teile · [Y] Baugruppen).
   • Typografie: Display-Serifen/sans-Header + JetBrains Mono Versal-Tracking für technische Beschriftungen.

2. joni-bongkar-cutaway (Redaktioneller Schnitt + Code-UI-Karten)

   • Ästhetik: Warmes Off-White (#F5F2EB), isometrische Querschnittsillustrationen + klare Daten-UI-Karten (KARTU UI), semantische Palet-Material-Legende, pillenförmig hervorgehobene Untertitel (#1E8E5A grün / #E87A24 orange).

3. zackd-cgi (ZackD Films 3D Makro-Durchflug)

   • Ästhetik: Glatte Studio-PBR-Beleuchtung, perspektivische Kamera mit aggressiven Makro-Zooms in innere mechanische Kammern, Echtzeit-Three.js-ClippingPlane-Querschnitte, weiche Umgebungsverdeckung.

4. dan-koe-glow / glow-sketch (Minimalistische High-Contrast Cyber/Mentale Modelle)

   • Ästhetik: Tiefschwarzer Obsidian (#07080C), leuchtende Vektordrahtgittermodelle und Neon-Three.js-Liniengeometrien (#38BDF8, #A855F7), kinetische Punktmatrix-Raster.

5. comic-vector (Pop-Ink & Halbton-stilisiert)

   • Ästhetik: High-Contrast dicke Tintenkonturen (#09090B), lebendige flache Farbfüllungen, Halbtonpunkt-Overlays, dynamische Comic-Impact-Aktionslinien.

---

Säule 2: Wiederverwendbare visuelle und 3D-Objektbibliothek (assets/library.ts)

Jede Episode greift auf einen modularen Katalog wiederverwendbarer 3D-Baugruppen (@remotion/three / Three.js) und 2D-UI-Karten zu und trägt zu diesem bei:

A. Three.js Prozedurale 3D-Baugruppen (<ThreeCanvas />)

Jedes 3D-Objekt ist als parametrische Gruppe benannter Sub-Meshes (parts & assemblies) mit explodeOffset: [x, y, z] und materialKey gemäß episode.schema.json aufgebaut:

• <CylinderCellAssembly />: Außengehäuse, Spiralelektrodenkern, Separatormembran, obere Anodenkappe, Gasventil (Batterien, Kondensatoren, Boiler, Kolben).
• <FluidPumpAndBoiler3D />: Wassertank, Kupferheizspirale, Hochdruckkesselzylinder, Portafilter/Düse, Manometer, Abtropfschale (Espressomaschinen, Hydrauliksysteme, Kühlkreisläufe).
• <CircuitPCBModule3D />: Glasfaserplatine, MOSFET/IC-Chips, Kupferleiterbahnen, LED-Anzeige, Anschlusskabel (BMS, Smartphones, IoT, Netzteile).
• <EnclosureShell3D />: Oberer Deckel, Seitenwände, interner Chassis-Rahmen mit automatischer clipPlane- oder explodeFactor-Unterstützung.

B. Wiederverwendbare 2D-Code-UI-Karten (KARTU UI)

• <ThreeStageFlowCard />: 3-spaltige Fortschrittskarte (z. B. DERAS -> MELAMBAT -> BERHENTI) mit animiertem aktuellen/Fortschrittsbalken darunter.
• <ComparisonVerdictCard />: Side-by-Side-Metrik-Duell (80% vs 96%, SEHAT vs DIPAKSA) mit animierten Zählern und Gewinner/Verlierer-Abzeichen.
• <MythStampCard />: Checklisten-Zusammenfassung + Federphysik-Stempel (MITOS / FAKTA / AMAN).

C. Semantische Palet-Material

Jeder Objektteil ist einem semantischen Materialschlüssel zugeordnet, nicht willkürlichen Farben:

• shell (#B8BCC2 Abu Bodi)
• structural (#2B2E33 Arang Plastik/Besi)
• core_component (#3B6EE8 Biru Teknis)
• control_bms (#1E8E5A Hijau Satpam/Aman)
• medium_fluid (#E8D882 Kuning Cairan/Elektrolit)
• hazard_heat (#E87A24 Oranye Panas/Tembaga)
• energy_current (#F5C400 Kuning Arus Listrik)

---

Säule 3: Dauer-Modi und Storyboard-Taktung (episode.schema.json)

Unterstützt 3 festgelegte Dauer-Stufen (Standardmäßig 90s, falls nicht anders angegeben):

• 60s Modus (Schnell Erklärend — ~140 Wörter): 9 Lembar-Kontak-Tafeln (6 3D/Schnitt + 3 UI-Karten) | 16 Keyframes (10 AKSI, 4 JEDA, 2 FOKUS).
• 90s Modus (Standard Deep-Dive — ~200 Wörter): 10-11 Lembar-Kontak-Tafeln | 20-22 Keyframes (13 AKSI, 5 JEDA, 4 FOKUS). Fügt mikroskopische/interne Unterbaugruppen-Explosion und Side-by-Side-Fehlersimulation hinzu.
• 120s Modus (Vollständige Dokumentarfilm-Analyse — ~280 Wörter): 12 Lembar-Kontak-Tafeln | 24-28 Keyframes (16 AKSI, 6 JEDA, 6 FOKUS). Fügt forensische Mehrfachverursacher-Analyse, langfristige Degradationskurve und eine 3-stufige Lösungskarte hinzu.

Jeder Keyframe im Storyboard muss Folgendes angeben:

1. timeSec und Rhythmus-Tag (AKSI grün, FOKUS amber, JEDA neutral).
2. narration: Prägnante erklärende Prosa im Indonesischen mit [[highlight]]-Tags um 1-2 Schwerpunktswörter pro Satz.
3. rigState: Deklarative Parameter, die die 3D/2D-Szene steuern:
   • explodeFactor: 0.0 (montiert) bis 1.0 (vollständig explodiert).
   • xrayClip: 0.0 (massive Hülle) bis 1.0 (vollständiger interner Schnitt).
   • cameraPose: [Azimut, Elevation, Zoom] oder Voreinstellung ("iso-wide", "macro-core", "top-down").
   • activeCallouts: Array von Komponentenbeschriftungen, die mit Führungslinien eingeblendet werden.
   • sfxCue: Sound-Trigger (whoosh_xray, servo_explode, ui_pop, electric_hum, verdict_stamp).

---

Säule 4: Deklarative Animations-Rigs (Remotion + Three.js)

Animieren Sie Meshes niemals manuell Frame für Frame. Binden Sie useCurrentFrame() und timeline.json-Zeitstempel an diese Kern-Rigs:

1. useExplodeRig(frame, triggerFrame, partOffsetVector): Verwendet spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }), um 3D-Unterbaugruppen sanft entlang axialer Vektoren zu trennen und gleichzeitig den HUD-Teilezähler zu aktualisieren.
2. useXRayClip(frame, startFrame, endFrame): Interpoliert eine Three.js THREE.Plane-Clipping-Konstante oder einen SVG-Clip-Pfad, um die Außenhülle aufzuschneiden (UTUH -> TEMBUS PANDANG).
3. useFlowParticles(frame, speed, pathPoints): Animiert instanziierte 3D-Kugeln oder SVG-gestrichelte Striche entlang interner Leitungen, um Strom, Wasserdruck, Wärme oder Gasblasen zu visualisieren.
4. useWordSyncSubtitles(frame, words): Liest edge-tts-WordBoundary-Zeitstempel, um gesprochene Wörter in Echtzeit hervorzuheben und <CalloutBadge />-Pop-ups zu exakten Schlüsselwort-Frames auszulösen.

---

Säule 5: Ein-Satz-Workflow (Ergebnisse)

Wenn der Benutzer ein Thema in einem Satz vorgibt (oder darum bittet, eine Episode zu erstellen/vorherzuschauen), führen Sie automatisch die vollständige Pipeline aus:

1. Lembar Kontak (9-12 Asset-Blaupausen + Palet-Material + 3D-Teileanzahl): Definieren Sie die wiederverwendbaren 3D-Baugruppen (X Teile · Y Baugruppen), KI-Schnitt-Prompts und Code-UI-Karten.
2. Keyframe-Storyboard (16-28 Frames mit AKSI / FOKUS / JEDA): Vollständiges zeitgestempeltes Skript mit [[highlight]]-Tokens, Kamerachoreografie und explodeFactor / xrayClip-Zuständen gemäß episode.schema.json.
3. Audio- und SFX-Kompilation: Führen Sie scripts/generate_voice_and_sfx.py aus, um Folgendes zu synthetisieren:
   • voiceover.mp3 (id-ID-ArdiNeural / id-ID-GadisNeural)
   • Prozedurale WAV-SFX (servo_explode.wav, whoosh_xray.wav, ui_pop.wav, electric_hum.wav, verdict_stamp.wav)
   • timeline.json (zugeordnete Wortgrenzen + Frame-Indexe).
4. Interaktives Studio / Remotion + Three.js-Projekt: Bereitstellung ausführbarer @remotion/three-Kompositionen gemäß references/remotion-composition-rig.md.