farizziezhi/remotion-architect

Remotion Explainer Architect Pro (v2 — Sistema y Motor de Series 3D)

Un motor de producción basado en sistemas para construir series de motion graphics explicativos de alta retención en Remotion + Three.js (@remotion/three). En lugar de depender de indicaciones ad-hoc por video, este skill aplica un Sistema de Producción Reutilizable de 5 Pilares:

1. Biblioteca Reutilizable de Activos Visuales y 3D (primitivas procedurales de Three.js, ensambles en vista explotada y tarjetas UI 2D)
2. Storyboard y Esquema de Narración basados en Audio (bloques de escena AKSI / FOKUS / JEDA + tokens de resaltado a nivel de palabra)
3. Ajustes Predefinidos de Tema y Dirección Visual (tipografía, paletas de materiales semánticos, shaders, lentes de cámara)
4. Rigs de Animación Declarativos (useExplodeRig, useXRayClip, useFlowParticles, useCameraChoreography)
5. Flujo de Trabajo Reutilizable de Una Frase (ingresa 1 frase de tema -> produce Lembar Kontak, Storyboard, Guion de Audio/SFX y código Remotion + Three.js)

Cuándo Usar

• El usuario proporciona una frase o pregunta de un solo tema (ej., "¿Por qué la máquina de espresso necesita 9 bares de presión?", "Desglose de cómo funciona una batería de bicicleta eléctrica") y desea un video explicativo completo o una vista previa de estudio interactiva.
• El usuario quiere construir o expandir una biblioteca reutilizable de activos visuales/3D, animación de anatomía explotada (estilo TAKEN APART) o plantilla de serie en Remotion.
• El usuario solicita un storyboard, una hoja de contacto de activos ("Lembar Kontak"), un guion de narración o una integración de edge-tts + SFX para un video de 60s, 90s o 120s.

---

⚡ Las 3 Reglas de Oro de Remotion + Three.js

Al implementar o generar código con este skill, aplica estrictamente:

1. Animación de Fotograma Determinista (Cero delta en useFrame) : Nunca uses acumuladores delta o requestAnimationFrame en hooks de Three.js. Todas las rotaciones, transformaciones y uniforms de shaders deben ser funciones puramente deterministas de frame = useCurrentFrame(). Consulta references/remotion-composition-rig.md.
2. Sincronización Dinámica de Audio mediante <Series> : La duración del audio de la locución varía dinámicamente con la síntesis de voz por IA (edge-tts). Nunca fijes duraciones de fotograma para escenas. Siempre calcula <Series.Sequence durationInFrames={Math.ceil(scene.durationSec * fps)}> a partir de timeline.json.
3. Adaptabilidad del Frustum Explotado y la Relación de Aspecto: Cuando explodeFactor alcanza 1.0, los componentes exteriores se expanden hacia afuera. El zoom de la cámara debe escalar dinámicamente (interpolate(explodeProgress, [0, 1], [baseZoom, baseZoom * 0.72])) para evitar que las partes se salgan del encuadre. Se deben soportar tanto 16:9 (1920x1080) como 9:16 (1080x1920 TikTok/Reels).

---

Pilar 1: Ajustes Predefinidos de Tema y Dirección Visual (theme.config.ts)

Siempre fija la dirección visual al inicio. Si el usuario no especifica un estilo, usa por defecto taken-apart-blueprint (que combina hojas de contacto editoriales con anatomía ortográfica explotada de Three.js "Taken Apart"). Consulta los tokens detallados en references/threejs-exploded-rig.md.

1. taken-apart-blueprint (Anatomía Técnica 3D Explotada)

   • Estética: Papel crema archivo cálido (#F2EFE9), contornos técnicos nítidos en tinta (#1E2022), cámara isométrica ortográfica de Three.js, shader Cel/Toon personalizado con paso de detección de bordes.
   • Marco HUD: Marcas de registro en esquinas, metadatos superiores (Fig 1, ANATOMÍA · [NOMBRE DEL OBJETO]), telemetría inferior (TAKEN APART, [X] partes · [Y] ensambles).
   • Tipografía: Encabezado serif/sans display + seguimiento en mayúsculas de JetBrains Mono para etiquetas técnicas.

2. joni-bongkar-cutaway (Corte Editorial + Tarjetas UI de Código)

   • Estética: Blanco roto cálido (#F5F2EB), ilustraciones de corte transversal isométrico + tarjetas UI de datos nítidas (KARTU UI), leyenda de Palet Material semántico, subtítulos resaltados en píldora (#1E8E5A verde / #E87A24 naranja).

3. zackd-cgi (Recorrido Macro 3D de ZackD Films)

   • Estética: Iluminación PBR de estudio suave, cámara en perspectiva con acercamientos macro agresivos a través de cámaras mecánicas internas, secciones transversales ClippingPlane en tiempo real de Three.js, oclusión ambiental suave.

4. dan-koe-glow / glow-sketch (Modelos Cibernéticos/Mentales Minimalistas de Alto Contraste)

   • Estética: Vacío de obsidiana profundo (#07080C), wireframes vectoriales brillantes y geometrías de línea neón de Three.js (#38BDF8, #A855F7), cuadrículas cinéticas de puntos.

5. comic-vector (Contorno Pop y Estilizado de Medios Tintos)

   • Estética: Contornos gruesos de tinta de alto contraste (#09090B), rellenos de color plano vibrantes, superposiciones de puntos de medios tintos, líneas de acción de impacto de cómic dinámicas.

---

Pilar 2: Biblioteca Reutilizable de Activos Visuales y 3D (assets/library.ts)

Cada episodio se basa y contribuye a un catálogo modular de ensambles 3D reutilizables (@remotion/three / Three.js) y Tarjetas UI 2D:

A. Ensambles 3D Procedurales de Three.js (<ThreeCanvas />)

Cada objeto 3D se construye como un grupo paramétrico de sub-mallas nombradas (parts y assemblies) con un explodeOffset: [x, y, z] y materialKey que se adhieren a episode.schema.json:

• <CylinderCellAssembly />: Carcasa exterior, núcleo de electrodo en espiral, membrana separadora, tapa del ánodo superior, válvula de ventilación de gas (baterías, condensadores, calderas, pistones).
• <FluidPumpAndBoiler3D />: Depósito de agua, bobina de calentamiento de cobre, cilindro de caldera de alta presión, portafiltro/boquilla, manómetro, bandeja de goteo (máquinas de espresso, sistemas hidráulicos, bucles de refrigeración).
• <CircuitPCBModule3D />: Placa de fibra de vidrio, chips MOSFET/IC, trazas de cobre, indicador LED, cables de conexión (BMS, teléfonos inteligentes, IoT, fuentes de alimentación).
• <EnclosureShell3D />: Tapa superior, paneles laterales, chasis interno con soporte automatizado de clipPlane o explodeFactor.

B. Tarjetas UI de Código 2D Reutilizables (KARTU UI)

• <ThreeStageFlowCard />: Tarjeta de progresión de 3 columnas (ej., RÁPIDO -> LENTO -> DETENIDO) con barra de progreso animada debajo.
• <ComparisonVerdictCard />: Duelo de métricas lado a lado (80% vs 96%, SANO vs FORZADO) con contadores animados e insignias de ganador/perdedor.
• <MythStampCard />: Resumen de lista de verificación + sello de goma con física de resorte (MITO / HECHO / SEGURO).

C. Palet Material Semántico

Cada parte del objeto se asigna a una clave de material semántico en lugar de colores arbitrarios:

• shell (#B8BCC2 Gris Carrocería)
• structural (#2B2E33 Carbón Plástico/Hierro)
• core_component (#3B6EE8 Azul Técnico)
• control_bms (#1E8E5A Verde Vigilante/Seguro)
• medium_fluid (#E8D882 Amarillo Líquido/Electrolito)
• hazard_heat (#E87A24 Naranja Caliente/Cobre)
• energy_current (#F5C400 Amarillo Corriente Eléctrica)

---

Pilar 3: Modos de Duración y Ritmo del Storyboard (episode.schema.json)

Soporta 3 niveles de duración fijos (por defecto a 90s si no se especifica):

• Modo 60s (Explicación Rápida — ~140 palabras): 9 Paneles Lembar Kontak (6 3D/Corte + 3 Tarjetas UI) | 16 Fotogramas Clave (10 AKSI, 4 JEDA, 2 FOKUS).
• Modo 90s (Inmersión Profunda Estándar — ~200 palabras): 10-11 Paneles Lembar Kontak | 20-22 Fotogramas Clave (13 AKSI, 5 JEDA, 4 FOKUS). Agrega explosión de sub-ensamble microscópico/interno y simulación de falla lado a lado.
• Modo 120s (Desglose Documental Completo — ~280 palabras): 12 Paneles Lembar Kontak | 24-28 Fotogramas Clave (16 AKSI, 6 JEDA, 6 FOKUS). Agrega desglose forense de múltiples culpables, curva de degradación a largo plazo y tarjeta de solución de 3 pasos.

Cada fotograma clave en el storyboard debe especificar:

1. timeSec y Etiqueta de Ritmo (AKSI verde, FOKUS ámbar, JEDA neutro).
2. narration: Prosa explicativa contundente en indonesio con etiquetas [[highlight]] alrededor de 1-2 palabras focales por oración.
3. rigState: Parámetros declarativos que controlan la escena 3D/2D:
   • explodeFactor: 0.0 (ensamblado) a 1.0 (completamente explotado).
   • xrayClip: 0.0 (carcasa sólida) a 1.0 (corte interno completo).
   • cameraPose: [azimuth, elevation, zoom] o preajuste ("iso-wide", "macro-core", "top-down").
   • activeCallouts: Matriz de etiquetas de componentes que aparecen con líneas guía.
   • sfxCue: Disparador de sonido (whoosh_xray, servo_explode, ui_pop, electric_hum, verdict_stamp).

---

Pilar 4: Rigs de Animación Declarativos (Remotion + Three.js)

Nunca animes mallas manualmente fotograma por fotograma. Vincula useCurrentFrame() y las marcas de tiempo de timeline.json a estos rigs principales:

1. useExplodeRig(frame, triggerFrame, partOffsetVector) : Usa spring({ frame: frame - triggerFrame, fps, config: { damping: 14, stiffness: 120 } }) para separar suavemente sub-ensambles 3D a lo largo de vectores axiales mientras actualiza el contador de partes del HUD.
2. useXRayClip(frame, startFrame, endFrame) : Interpola una constante de recorte de THREE.Plane de Three.js o un clip-path SVG para abrir la carcasa exterior (SÓLIDO -> TRANSPARENTE).
3. useFlowParticles(frame, speed, pathPoints) : Anima esferas 3D instanciadas o trazos discontinuos SVG a lo largo de conductos internos para visualizar electricidad, presión de agua, calor o burbujas de gas.
4. useWordSyncSubtitles(frame, words) : Lee las marcas de tiempo WordBoundary de edge-tts para resaltar palabras habladas en tiempo real y activar ventanas emergentes <CalloutBadge /> en los fotogramas exactos de las palabras clave.

---

Pilar 5: Flujo de Trabajo Reutilizable de Una Frase (Entregables)

Cuando el usuario proporciona una frase de tema único (o solicita construir/vista previa de un episodio), ejecuta automáticamente el pipeline completo:

1. Lembar Kontak (9-12 Planos de Activos + Palet Material + Conteo de Partes 3D): Define los ensambles 3D reutilizables (X partes · Y ensambles), indicaciones de corte por IA y tarjetas UI de Código.
2. Storyboard de Fotogramas Clave (16-28 Fotogramas con AKSI / FOKUS / JEDA): Guion completo con marcas de tiempo, tokens [[highlight]], coreografía de cámara y estados explodeFactor / xrayClip de acuerdo con episode.schema.json.
3. Compilación de Audio y SFX: Ejecuta scripts/generate_voice_and_sfx.py para sintetizar:
   • voiceover.mp3 (id-ID-ArdiNeural / id-ID-GadisNeural)
   • SFX WAV procedurales (servo_explode.wav, whoosh_xray.wav, ui_pop.wav, electric_hum.wav, verdict_stamp.wav)
   • timeline.json (límites de palabras mapeados + índices de fotograma).
4. Estudio Interactivo / Proyecto Remotion + Three.js: Proporciona composiciones @remotion/three listas para ejecutar siguiendo references/remotion-composition-rig.md.