farizziezhi/remotion-architect

Remotion Explainer Architect Pro (v2 — Système et Moteur de Série 3D)

Un moteur de production systémique pour construire des séries explicatives animées à fort taux de rétention avec Remotion + Three.js (@remotion/three). Au lieu de se reposer sur des requêtes improvisées par vidéo, ce skill applique un Système de Production Réutilisable en 5 Piliers :

1. Bibliothèque d'actifs visuels et 3D réutilisable (primitives Three.js procédurales, assemblages éclatés et cartes UI 2D)
2. Storyboard audio et schéma de narration (blocs de scènes AKSI / FOKUS / JEDA + jetons de mise en évidence au niveau des mots)
3. Presets de thème et de direction visuelle verrouillés (typographie, palettes de matériaux sémantiques, shaders, lentilles de caméra)
4. Rigs d'animation déclaratifs (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography)
5. Workflow réutilisable en une phrase (saisir 1 phrase de sujet -> sortir une Lembar Kontak complète, un Storyboard, un script Audio/SFX et du code Remotion + Three.js)

Quand l'utiliser

• L'utilisateur fournit un sujet ou une question en une phrase (ex : "Pourquoi une machine à expresso a-t-elle besoin de 9 bars de pression ?", "Démonter le fonctionnement de la batterie d'un vélo électrique") et souhaite une vidéo explicative complète ou un aperçu interactif en studio.
• L'utilisateur souhaite construire ou étendre une bibliothèque d'objets visuels/3D réutilisable, une animation d'anatomie éclatée (style TAKEN APART) ou un modèle de série dans Remotion.
• L'utilisateur demande un storyboard, une fiche de contact d'actifs ("Lembar Kontak"), un script de narration ou une intégration edge-tts + SFX pour une vidéo de 60s, 90s ou 120s.

---

⚡ Les 3 Règles d'Or de Remotion + Three.js

Lors de l'implémentation ou de la génération de code avec ce skill, appliquer strictement :

1. Animation d'image déterministe (Zéro delta dans useFrame) : Ne jamais utiliser d'accumulateurs delta ou requestAnimationFrame dans les hooks Three.js. Toutes les rotations, transformations et uniforms de shader doivent être des fonctions purement déterministes de frame = useCurrentFrame(). Voir references/remotion-composition-rig.md.
2. Synchronisation audio dynamique via <Series> : La durée audio de la voix-off varie dynamiquement avec la synthèse vocale IA (edge-tts). Ne jamais coder en dur des durées d'image fixes pour les scènes. Toujours calculer <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}> à partir de timeline.json.
3. Adaptabilité du frustum d'explosion et du rapport d'aspect : Lorsque explodeFactor atteint 1.0, les composants externes se dilatent vers l'extérieur. Le zoom de la caméra doit s'adapter dynamiquement (interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])) pour éviter que les pièces ne sortent du cadre. Les formats 16:9 (1920x1080) et 9:16 (1080x1920 TikTok/Reels) doivent tous deux être pris en charge.

---

Pilier 1 : Presets de thème et de direction visuelle (theme.config.ts)

Toujours verrouiller la direction visuelle au début. Si l'utilisateur ne spécifie pas de style, utiliser par défaut taken-apart-blueprint (combinant des fiches de contact éditoriales avec une anatomie orthographique éclatée Three.js de style "Taken Apart"). Voir les détails des jetons dans references/threejs-exploded-rig.md.

1. taken-apart-blueprint (Anatomie technique 3D éclatée)

   • Esthétique : Papier d'archive blanc crème chaud (#F2EFE9), contours techniques nets (#1E2022), caméra Three.js isométrique orthographique, shader Cel/Toon personnalisé avec passe de contour de détection des bords.
   • Cadre HUD : Repères de coin, métadonnées en haut (Fig 1, ANATOMY · [NOM OBJET]), télémétrie en bas (TAKEN APART, [X] pièces · [Y] assemblages).
   • Typographie : En-tête serif/sans affichage + JetBrains Mono en majuscules pour les étiquettes techniques.

2. joni-bongkar-cutaway (Coupe éditoriale + Cartes UI de code)

   • Esthétique : Blanc cassé chaud (#F5F2EB), illustrations de coupe transversale isométrique + cartes UI de données nettes (KARTU UI), légende Palet Material sémantique, sous-titres en surbrillance (#1E8E5A vert / #E87A24 orange).

3. zackd-cgi (Macro survol 3D ZackD Films)

   • Esthétique : Éclairage PBR de studio lisse, caméra perspective avec zooms macro agressifs à travers les chambres mécaniques internes, coupes transversales ClippingPlane Three.js en temps réel, occlusion ambiante douce.

4. dan-koe-glow / glow-sketch (Modèles cyber/mentaux minimalistes à fort contraste)

   • Esthétique : Vide d'obsidienne profond (#07080C), maillages vectoriels lumineux et géométries de lignes Three.js néon (#38BDF8, #A855F7), grilles cinétiques de points matriciels.

5. comic-vector (Encrage pop et tramé stylisé)

   • Esthétique : Contours d'encrage épais à fort contraste (#09090B), remplissages de couleurs vives et plates, superposition de points tramés, lignes d'action d'impact de bande dessinée dynamiques.

---

Pilier 2 : Bibliothèque d'objets visuels et 3D réutilisable (assets/library.ts)

Chaque épisode puise dans un catalogue modulaire d'assemblages 3D réutilisables (@remotion/three / Three.js) et de cartes UI 2D, et y contribue :

A. Assemblages 3D procéduraux Three.js (<ThreeCanvas />)

Chaque objet 3D est construit comme un groupe paramétrique de sous-maillages nommés (parts & assemblies) avec un explodeOffset: [x, y, z] et une materialKey conformément à episode.schema.json :

• <CylinderCellAssembly /> : Boîtier extérieur, noyau d'électrode en spirale, membrane séparatrice, capuchon d'anode supérieur, soupape de gaz (batteries, condensateurs, chaudières, pistons).
• <FluidPumpAndBoiler3D /> : Réservoir d'eau, serpentin chauffant en cuivre, cylindre de chaudière haute pression, porte-filtre/buse, manomètre, bac d'égouttage (machines à expresso, systèmes hydrauliques, boucles de refroidissement).
• <CircuitPCBModule3D /> : Carte en fibre de verre, puces MOSFET/IC, pistes de cuivre, voyant LED, câbles de connexion (BMS, smartphones, IoT, alimentations).
• <EnclosureShell3D /> : Couvercle supérieur, panneaux latéraux, châssis interne avec support automatisé de clipPlane ou explodeFactor.

B. Cartes UI 2D réutilisables (KARTU UI)

• <ThreeStageFlowCard /> : Carte de progression à 3 colonnes (ex. DERAS -> MELAMBAT -> BERHENTI) avec barre de progression animée en dessous.
• <ComparisonVerdictCard /> : Duel de métriques côte à côte (80% vs 96%, SEHAT vs DIPAKSA) avec compteurs animés et badges gagnant/perdant.
• <MythStampCard /> : Résumé de liste de contrôle + tampon à ressort physique (MITOS / FAKTA / AMAN).

C. Palet Material sémantique

Chaque pièce d'objet correspond à une clé de matériau sémantique plutôt qu'à des couleurs arbitraires :

• shell (#B8BCC2 Gris Corps)
• structural (#2B2E33 Noir Plastique/Fer)
• core_component (#3B6EE8 Bleu Technique)
• control_bms (#1E8E5A Vert Sécurité/Sûr)
• medium_fluid (#E8D882 Jaune Fluide/Électrolyte)
• hazard_heat (#E87A24 Orange Chaud/Cuivre)
• energy_current (#F5C400 Jaune Courant Électrique)

---

Pilier 3 : Modes de durée et rythme du storyboard (episode.schema.json)

Prend en charge 3 paliers de durée verrouillés (par défaut 90s si non spécifié) :

• Mode 60s (Explication rapide — ~140 mots) : 9 panneaux Lembar Kontak (6 3D/Coupe + 3 Cartes UI) | 16 images clés (10 AKSI, 4 JEDA, 2 FOKUS).
• Mode 90s (Plongée standard — ~200 mots) : 10-11 panneaux Lembar Kontak | 20-22 images clés (13 AKSI, 5 JEDA, 4 FOKUS). Ajoute une explosion de sous-assemblage microscopique/interne et une simulation de panne côte à côte.
• Mode 120s (Analyse documentaire complète — ~280 mots) : 12 panneaux Lembar Kontak | 24-28 images clés (16 AKSI, 6 JEDA, 6 FOKUS). Ajoute une analyse médico-légale multi-responsable, une courbe de dégradation à long terme et une carte de solution actionnable en 3 étapes.

Chaque image clé du storyboard doit spécifier :

1. timeSec et Étiquette de rythme (AKSI vert, FOKUS ambre, JEDA neutre).
2. narration : Prose explicative percutante en français avec des balises [[highlight]] autour de 1-2 mots focaux par phrase.
3. rigState : Paramètres déclaratifs pilotant la scène 3D/2D :
   • explodeFactor : 0.0 (assemblé) à 1.0 (complètement éclaté).
   • xrayClip : 0.0 (coque solide) à 1.0 (coupe interne complète).
   • cameraPose : [azimuth, elevation, zoom] ou préréglage ("iso-wide", "macro-core", "top-down").
   • activeCallouts : Tableau d'étiquettes de composants à faire apparaître avec des lignes de guidage.
   • sfxCue : Déclencheur sonore (whoosh_xray, servo_explode, ui_pop, electric_hum, verdict_stamp).

---

Pilier 4 : Rigs d'animation déclaratifs (Remotion + Three.js)

Ne jamais animer les maillages manuellement image par image. Lier useCurrentFrame() et les horodatages timeline.json à ces rigs principaux :

1. useExplodeRig(frame, triggerFrame, partOffsetVector) : Utilise spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }) pour séparer en douceur les sous-assemblages 3D le long de vecteurs axiaux tout en mettant à jour le compteur de pièces HUD.
2. useXRayClip(frame, startFrame, endFrame) : Interpole une constante de découpage THREE.Plane Three.js ou un clip-path SVG pour ouvrir la coque extérieure (UTUH -> TEMBUS PANDANG).
3. useFlowParticles(frame, speed, pathPoints) : Anime des sphères 3D instanciées ou des traits pointillés SVG le long de conduits internes pour visualiser l'électricité, la pression de l'eau, la chaleur ou les bulles de gaz.
4. useWordSyncSubtitles(frame, words) : Lit les horodatages WordBoundary de edge-tts pour mettre en évidence les mots prononcés en temps réel et déclencher les pop-ups <CalloutBadge /> sur les images clés exactes des mots.

---

Pilier 5 : Workflow réutilisable en une phrase (Livrables)

Lorsque l'utilisateur donne un sujet en une seule phrase (ou demande de construire/prévisualiser un épisode), exécuter automatiquement le pipeline complet :

1. Lembar Kontak (9-12 plans d'actifs + Palet Material + Décompte des pièces 3D) : Définir les assemblages 3D réutilisables (X pièces · Y assemblages), les prompts de coupe IA et les cartes UI de code.
2. Storyboard d'images clés (16-28 images avec AKSI / FOKUS / JEDA) : Script complet horodaté avec jetons [[highlight]], chorégraphie de caméra et états explodeFactor / xrayClip conformément à episode.schema.json.
3. Compilation audio et SFX : Exécuter scripts/generate_voice_and_sfx.py pour synthétiser :
   • voiceover.mp3 (fr-FR-DeniseNeural / fr-FR-HenriNeural)
   • SFX WAV procéduraux (servo_explode.wav, whoosh_xray.wav, ui_pop.wav, electric_hum.wav, verdict_stamp.wav)
   • timeline.json (limites de mots mappées + indices d'images).
4. Studio interactif / Projet Remotion + Three.js : Fournir des compositions @remotion/three prêtes à être exécutées conformément à references/remotion-composition-rig.md.