Motion Forge: Guía Principal del Skill de Producción Industrial de Código a Video (Code2Video)

Este proyecto es un skill de nivel industrial de Código a Video completamente autocontenido y distribuible de forma independiente. El sistema se basa en un núcleo tecnológico unificado de Remotion 4.x + React 19 + TypeScript + Three.js (@remotion/three) + Canvas 2D + SVG, e incluye 265 tarjetas de animación atómicamente desacopladas (divididas en 9 dominios profesionales), una base visual subyacente (_shared/), un banco de trabajo de depuración local visual y un riguroso sistema de dos puertas de control de calidad G1/G2.

Índice

Arquitectura Central y las Cinco Leyes Técnicas Inquebrantables
Procedimiento Operativo Estándar de las Dos Puertas de Control de Calidad (SOP de Puertas G1 y G2)
Sistema de Tuberías Independientes por Escenario (Scenario Pipelines)
Panorama de Activos de las 265 Tarjetas de Animación y Filosofía de Decisión del Director (Creative & Open Motion Design)
Protocolo de Guion Gráfico Film IR y Especificación de Renderizado Multi-Tecnología
Ciclo de Vida Completo de la Cadena de Herramientas CLI e Interacción con el Banco de Trabajo Local
Lista de Verificación de Entrega Final y Resolución de Problemas

1. Arquitectura Central y las Cinco Leyes Técnicas Inquebrantables

Antes de escribir cualquier código de guion gráfico o renderizado de video, el Agente debe adherirse a las siguientes cinco disciplinas de diseño no negociables:

Desacoplamiento Absoluto y Principio de Reloj Local (Solo Fotograma Local):
- Cada escena usa solo números de fotograma locales (fotograma 0 a durationInFrames). Está estrictamente prohibido codificar marcas de tiempo absolutas de toda la película (absoluteFrame o from) dentro de una escena. El reloj absoluto de toda la película es compilado por la capa central a través de la acumulación de la línea de tiempo;
- Está estrictamente prohibido que las escenas importen componentes internos entre sí a través de módulos. Todo el estado compartido entre escenas debe pasarse a través de los props de la Film IR;
- Las tarjetas de animación solo contienen lógica matemática de movimiento y lógica visual. Está estrictamente prohibido codificar texto específico del proyecto o rutas de imágenes de negocio dentro de las tarjetas.
Determinismo de Fotograma como Función Pura (Ejecución Determinista por Fotograma):
- Todas las deformaciones de animación, desplazamientos de objetos y transformaciones de transparencia deben ser funciones de cálculo matemático puro del fotograma local actual fotograma: $Valor = f(fotograma)$;
- Está estrictamente prohibido usar requestAnimationFrame, setInterval, setTimeout del navegador o líneas de tiempo externas autocontroladas;
- Está estrictamente prohibido usar Math.random() sin semilla (se debe usar random(semilla) integrado de Remotion con semilla), asegurando que, sin importar cuándo se busque y renderice el mismo fotograma, los píxeles de la imagen sean 100% idempotentes.
Principio de Activos Reales de Bucle Cerrado Local (Solo Activos Locales):
- El motor de renderizado prohíbe conectar directamente URL remotas no verificadas en la síntesis de video (para prevenir desconexiones de red, enlaces rotos y latencia de solicitud);
- Las imágenes externas, clips de video y pistas de audio deben ser descargados por los Proveedores al directorio local del proyecto con anticipación y registrados de manera unificada en assets.json. Los activos faltantes deben marcarse explícitamente e informarse al usuario. Está estrictamente prohibido usar marcadores de posición silenciosos o datos falsos.
Filosofía de Renderizado Unificado de Fotogramas con Múltiples Rutas Tecnológicas (Renderizado Multi-Tecnología):
- Para maquetación e IU interactiva: HTML/CSS + animaciones elásticas Spring;
- Para contornos geométricos, líneas de conexión, gráficos y máscaras: interpolación de rutas SVG;
- Para partículas, fluidos y decenas de miles de puntos de alto movimiento: Canvas 2D;
- Para modelos 3D, iluminación espacial y movimientos de cámara tridimensionales: Three.js (@remotion/three);
- Todas las rutas tecnológicas se someten unificadamente al reloj de sincronización de fotogramas useCurrentFrame() de Remotion.
Principio de Proyecto Independiente (Proyecto Autónomo):
- Este directorio de skill solo contiene especificaciones de flujo de trabajo, referencias de tarjetas de animación, plantillas de tiempo de ejecución genéricas y el generador de proyectos forge create. Todo el contenido del proyecto del usuario (core/, cards/, scenes/, activos public/, film.json, package.json, el banco de trabajo y los resultados de renderizado) debe residir en el propio directorio del proyecto del usuario, con su propio npm ci, su propia verificación y renderizado, y debe poder ejecutarse independientemente del directorio del skill;
- Está estrictamente prohibido escribir código/activos específicos del proyecto en el directorio del skill, y también está prohibido usar enlaces simbólicos para montar el contenido del proyecto de nuevo en el directorio del skill. forge create copia el tiempo de ejecución, las tarjetas de animación y la Film IR predeterminada como archivos reales al proyecto. Los componentes de escena específicos del proyecto se escriben directamente en scenes/ del proyecto;
- El output/projects/ y el flujo de proceso de la CLI dentro del directorio del skill solo se aplican a los ejemplos incluidos en el skill; los registros de revisión G1/G2 de proyectos reales se guardan dentro del directorio del proyecto.
Inicialización de Nuevo Proyecto (Entrada: ruta absoluta del proyecto y activos de entrada; Salida: esqueleto del proyecto con dependencias instalables de forma independiente):
1. Ejecutar npm run forge -- create --dir /ruta/absoluta/proyecto --input <entrada> [--audio-kind song|instrumental] [--name <id>] en el directorio de plantillas. El destino debe ser un directorio vacío fuera de la plantilla. El comando generará una copia completa del tiempo de ejecución, copiará los activos locales a public/assets/<id>/ y creará un borrador del proyecto;
2. Después de la inicialización, entrar en PROJECT_ROOT, ejecutar npm ci, npm run validate -- --project <id>. El código, los activos, la Film IR, el estado de aprobación y la salida del proyecto real están autocontenidos dentro de PROJECT_ROOT/output/projects/<id>/ y PROJECT_ROOT/public/;
3. Los activos locales solo usan rutas relativas bajo public/; las fuentes remotas solo se registran como metadatos de origen y no entran en las referencias de renderizado. Si falta un activo, se detiene inmediatamente; el proyecto no puede hacerse pasar por un proyecto independiente usando rutas absolutas o enlaces simbólicos externos;
4. Todos los comandos posteriores deben ejecutar cd <PROJECT_ROOT> primero, luego ejecutar los scripts dentro del proyecto. Los productos de renderizado y los registros de revisión no deben escribirse de vuelta al directorio de plantillas;
5. El directorio de plantillas solo se usa como fuente de solo lectura durante create. Después de la generación, los imports, las dependencias npm, los scripts y las referencias de activos en el proyecto no deben apuntar a ese directorio.

Ramas de Fracaso y Rutas de Recuperación

Condición de Disparo	Manejo de Primera Línea	Si aún falla o se necesita un cambio
La raíz del proyecto no está clara, o se va a escribir en el directorio del skill	Detener la escritura, confirmar la ruta absoluta del proyecto con el usuario; todos los comandos posteriores usan ese directorio de proyecto como directorio de trabajo	Sin una ruta clara, solo discutir el plan, no crear archivos
Faltan activos necesarios, no se pueden leer o los derechos de autor no están claros	Informar la ruta específica y la razón, pausar las escenas afectadas; no usar marcadores de posición silenciosos ni inventar activos	El usuario completa los activos o aprueba explícitamente un plan alternativo, y se revisa G1 sincrónicamente
G1 no está confirmado o se solicita una modificación	Permanecer en la fase de diseño, revisar `film.json` y `design-review.md`	No crear fotogramas de muestra, no ejecutar el comando de aprobación G1
El fotograma de muestra muestra pantalla negra, desincronización de audio/video, texto fuera de los límites o calidad no conforme	Mantener el bloqueo G2, localizar la escena específica y repararla, solo volver a renderizar el fotograma de muestra	Volver a enviar para G2; no usar el renderizado completo de la película en lugar de la verificación de muestra
Cambios en la narrativa, maquetación, duración, activos o audio ya aprobados	Invalidar las conclusiones G1/G2 originales, volver a G1 para reconfirmar el alcance afectado	Después de que el nuevo G1 sea aprobado, volver a crear y confirmar el fotograma de muestra con audio
Fallo en los comandos de construcción, verificación o renderizado	Conservar el registro completo, reparar la causa raíz y volver a ejecutar el mismo comando; no comentar el error ni saltarse la verificación	Si aún no se pasa, detener la entrega, informar claramente los elementos bloqueados y las verificaciones completadas
El escaneo de independencia encuentra rutas absolutas externas, dependencias `file:` o enlaces simbólicos que apuntan al directorio del skill	Copiar el código o activos necesarios al proyecto, cambiar a referencias dentro del proyecto	Reinstalar y renderizar en una copia aislada; no declarar que se puede ejecutar de forma independiente si no se ha pasado

2. Procedimiento Operativo Estándar de las Dos Puertas de Control de Calidad (SOP de Puertas G1 y G2)

Para evitar que el Agente “imagine cosas, apile código a ciegas, cause un gran desperdicio computacional y se desvíe de lo esperado”, el sistema exige dos puertas de control de calidad (Revisión de Dos Puertas). Está estrictamente prohibido saltarse las puertas y renderizar toda la película directamente!

[Entrada del usuario] 
   ↓
[Análisis de requisitos y preparación de activos] 
   ↓
[Escribir borrador de Film IR] 
   ↓
【🔴 PUNTO DE CONTROL G1: Confirmación del guion gráfico y diseño】 → Presentar al usuario un guion y tabla visual claramente formateados, DETENER y esperar aprobación
   ↓ (Después de la confirmación del usuario, ejecutar npm run forge -- approve-design)
[Crear fotograma de muestra real con audio] 
   ↓
【🔴 PUNTO DE CONTROL G2: Confirmación del fotograma de muestra con audio】 → Renderizar el video del fotograma representativo, el usuario revisa la calidad audiovisual real y la sincronización de audio/video, DETENER y esperar aprobación
   ↓ (Después de la confirmación del usuario, ejecutar npm run forge -- approve-sample)
[Ensamblaje del código de toda la película y renderizado por lotes]
   ↓
[Entrega final (MP4 + proyecto editable + banco de trabajo)]

2.1. Puerta G1: Confirmación del Guion Gráfico y Diseño Visual (Revisión de Diseño)

Antes de escribir cualquier código de renderizado complejo, el Agente debe completar primero el "Plan de Diseño Visual y Guion Gráfico G1" y presentar al usuario un documento de revisión en Markdown claramente formateado, que contenga al menos:

Atributos básicos: tipo de película, audiencia objetivo, relación de aspecto (horizontal 16:9 / vertical 9:16), duración total objetivo y velocidad de fotogramas (por ejemplo, 30 fps);
Tema visual: color principal, color de fondo, color principal del texto, color de acento (Acento), familia de fuentes tipográficas;
Selección del reloj principal: alineación con voz en off / alineación con letras de canciones / cuadrícula de ritmo de música instrumental / duración de lectura de texto;
Tabla detallada del guion gráfico (debe presentarse al usuario estrictamente en el siguiente formato de tabla):

Escena	Nombre del Plano	Propósito Narrativo y Semántica (Semántica)	Voz en Off	Texto Real en Pantalla (Texto en Pantalla)	Descripción Visual	Tarjeta de Animación Principal (Primaria)	Tarjeta de Cámara (Cámara)	Tarjeta de Transición (Transición)	Duración Local (Fotogramas/Seg)
S01	Apertura Impactante	Gancho: Crear suspenso	¿Por qué el 90% de las transformaciones de IA empresarial terminan en la fase de demostración?	"¿Por qué fracasa el 90% de las transformaciones de IA empresarial?"	Título grande de alto contraste centrado + placa base de advertencia roja brillante	`typography/halation-bloom`	`cámara/slow-push`	`transición/cube-rotate`	90f (3.0s)
S02	Visualización de Datos	Datos: Mostrar estadísticas impactantes	Primero, dos cifras: el 78% se queda en la fase de juguete, el 12% genera un retorno negativo.	"78% se queda en fase de juguete12% genera ROI negativo"	Panel de comparación de dos columnas izquierda/derecha + números dinámicos y gráfico de arena descendente	`datos/particle-sand-fill`	Ninguna	`transición/whip-pan`	150f (5.0s)

🔴 PUNTO DE CONTROL · DETENER: Después de presentar al usuario, la ronda debe terminar y se debe preguntar si está de acuerdo con la planificación del guion gráfico; no se debe ejecutar la aprobación, crear el fotograma de muestra ni renderizar toda la película en la misma ronda.
Señal de Aprobación: Solo después de que el usuario confirme explícitamente G1 en una respuesta posterior, el Agente ejecutará en PROJECT_ROOT:
```
npm run forge -- approve-design --project <id-del-proyecto>
```

2.2. Puerta G2: Confirmación del Fotograma de Muestra con Audio (Revisión de Muestra)

Después de que G1 sea aprobado, no se debe renderizar toda la película inmediatamente. Se debe seleccionar la escena más representativa de toda la película, la visualmente más compleja y que contenga elementos reales de audio y video (generalmente un plano de Gancho o un plano culminante central), para crear y renderizar como un video de muestra:

Comando de renderizado:

npm run forge -- render --project <id-del-proyecto> --scope sample

Puntos clave de control de calidad:
- ¿El audio y el video están sincronizados con precisión? ¿Los subtítulos entran 1-2 fotogramas antes de que comience la pronunciación?
- ¿El texto en la pantalla está oscurecido, roto por saltos de línea o fuera del área segura?
- ¿La velocidad de la animación coincide con el estado de ánimo de la música? ¿Da sensación de respiro?
🔴 PUNTO DE CONTROL · DETENER: Después de proporcionar el video de muestra real y los resultados del control de calidad, la ronda debe terminar y se debe esperar la revisión del usuario; no se debe aprobar G2 en nombre del usuario.
Señal de Aprobación: Solo después de que el usuario confirme explícitamente el fotograma de muestra, se ejecuta en PROJECT_ROOT:
```
npm run forge -- approve-sample --project <id-del-proyecto>
```
Solo después de completar la aprobación G2, la máquina de estado del proyecto desbloquea el permiso de renderizado final de toda la película.

3. Sistema de Tuberías Independientes por Escenario (Scenario Pipelines)

La lógica de procesamiento de extremo a extremo para diferentes tipos de entrada se divide en archivos de guía independientes, almacenados en el directorio pipelines/. El Agente debe consultar la guía correspondiente según el tipo real de entrada del usuario:

Tipo de Escenario	Entrada Aplicable y Tipo de Película	Archivo de Guía de Tubería Independiente Correspondiente
Escenario 1: URL a Video	Blogs, cuentas oficiales, páginas de aterrizaje SaaS, documentación técnica, comunicados de prensa	`pipelines/url-to-video.md`
Escenario 2: Audio de Música Puramente Instrumental a Video	Instrumentos puros, música electrónica, bandas sonoras épicas; películas filosóficas, videos de ritmo rápido, ensayos de atmósfera	`pipelines/instrumental-to-video.md`
Escenario 3: Canción con Voz a Video	Canciones completas (voz + acompañamiento); videoclips de letras dinámicas, cortometrajes narrativos musicales	`pipelines/song-to-video.md`
Escenario 4: Tema Puro de Planificación Autónoma a Video	Tema/propuesta de una sola frase; divulgación científica profunda, filosofía humana, perspicacia empresarial, cortometrajes de cultura general	`pipelines/theme-to-video.md`
Escenario 5: Mezcla de Activos Multimodales del Usuario a Video	Imágenes propias del usuario, capturas de pantalla, clips de video cortos, grabaciones de voz en off; demostraciones de productos, Vlogs	`pipelines/assets-to-video.md`
Especificación General de Planificación de Contenido	Planificación estructurada de temas/URL, arco narrativo, verificación de hechos y conversión a Film IR	`pipelines/content-planning.md`
Guía de Extensión de Escenarios	Cómo extender nuevas entradas (por ejemplo, tablas, PPT, podcasts de dos personas, etc.)	`pipelines/extending-pipeline.md`

4. Panorama de Activos de las 265 Tarjetas de Animación y Filosofía de Decisión del Director (Creative & Open Motion Design)

Las 265 tarjetas de animación atómicas integradas en el sistema son los pinceles visuales del Agente para crear videos.

4.1. Principio de Selección Abierta: Imaginación Artística Sin Límites

Está estrictamente prohibido seguir modelos rígidos y restricciones dogmáticas: Este sistema nunca limita diciendo “ciertos tipos de películas deben usar ciertas tarjetas”. Por el contrario, animamos al Agente a combinar e innovar libremente según la tensión emocional del texto, el suspenso narrativo y los latidos auditivos;
El Agente es el verdadero director visual: Las tarjetas de animación son un conjunto de bloques de construcción modulares. Puedes usar interaction/command-palette-summon, originalmente para productos tecnológicos, para expresar la “recuperación de conocimiento” de un pensador antiguo; o usar el flip de letras mecánico de aeropuerto typography/split-flap-flip para mostrar viajes en el tiempo o una cuenta regresiva de vida;
Ajuste libre de parámetros sin escalas: Cada tarjeta expone parámetros ricos (como rigidez del resorte, gravedad, radio de desenfoque, número de partículas, etc.). El Agente puede personalizar libremente la sensación de movimiento individualizada en los params de film.json.

4.2. Panorama de Activos de Animación por los Nueve Dominios (265 Tarjetas)

Las 265 tarjetas están encapsuladas de manera estandarizada, admiten adaptación automática para modo horizontal y vertical, y están completamente cohesionadas y desacopladas por dominio:

Categoría (Tipo)	Directorio y Número Total de Tarjetas	Función Visual Principal	Activos de Tarjetas Representativos (se pueden referenciar directamente en el código)
`camera` (Cámara)	`cards/camera/` (21 tarjetas)	Dolly, paneo, inclinación; longitud focal de la lente; distorsión de perspectiva; establece profundidad espacial en imágenes planas	`dolly-zoom` (zoom de deslizamiento Hitchcock), `slow-push` (empuje lento y profundo), `slow-pull` (alejamiento gradual), `shot-crash-zoom-punch` (zoom de impacto contundente), `space-camera-moves` (giros en el espacio 3D), `tension-camera-moves` (inclinación del horizonte para tensión), `overhead-camera-moves` (paneo de gran angular cenital), `whip-pan` (barrido rápido), `orbit-drift` (deriva orbital)
`typography` (Tipografía)	`cards/typography/` (52 tarjetas)	Entrada de título, ritmo de subtítulos, énfasis en frases clave, terminal de código, decodificación de caracteres	`split-flap-flip` (flip mecánico retro de aeropuerto), `scramble-decode` (decodificación de matriz de caracteres), `halation-bloom` (resplandor de sobreexposición de película), `type-rhythm-sync` (alineación de subtítulos con el ritmo), `tracking-expand-reveal` (revelación por expansión de espaciado), `terminal-typewriter` (máquina de escribir de terminal hacker), `keyword-reveal` (revelación gradual de palabras clave), `quote-card` (tarjeta de cita elegante), `highlighter-sweep` (marcado con línea de resaltador), `cel-flash-stomp` (estroboscopio de impacto congelado)
`interaction` (Componentes e Interacción)	`cards/interaction/` (58 tarjetas)	Objetos esqueuomórficos, componentes interactivos, tarjetas flotantes, ventanas emergentes y colaboración del cursor	`command-palette-summon` (invocación flotante Cmd+K), `stack-reveal` (revelación por plegado de tarjetas), `popup-book-rise` (levantamiento de libro pop-up de papel), `masking-tape-slap` (golpe de cinta adhesiva), `autolayout-gap-dial` (dial de diseño automático), `carousel-3d` (carrusel 3D), `theme-switch-moves` (ondulación de cambio de tema), `collab-cursor-moves` (concierto de cursores múltiples), `type-and-filter` (filtro por escritura), `glassmorphism-card` (panel de vidrio esmerilado)
`data` (Datos y Gráficos)	`cards/data/` (20 tarjetas)	Sedimentación de partículas físicas, líneas dinámicas y barras, paneles de instrumentos, sprint numérico	`particle-sand-fill` (sedimentación por gravedad de arena), `counter-confetti` (sprint numérico con confeti), `number-counter` (contador giratorio), `chart-grow` (crecimiento de barras y líneas), `chart-live-moves` (flujo de datos en tiempo real), `gauge-readout-moves` (salto de aguja de indicador), `before-after-slider-scrub` (control deslizante de comparación antes/después), `scroll-brake-moves` (freno de desplazamiento y congelación)
`effects` (Efectos Especiales e Iluminación)	`cards/effects/` (22 tarjetas)	Resplandor barrido, retícula de escaneo HUD, cristal 3D auto-giratorio, campo de partículas de ambiente	`three-crystal` (cristal 3D auto-giratorio con Three.js), `light-play-moves` (resplandor difuso barrido), `spotlight-sweep-moves` (sombra de foco barrido), `glow-flyline-moves` (trayectoria de línea voladora brillante), `fui-hud-moves` (despliegue de wireframe tecnológico), `impact-feedback` (onda de choque de impacto de anime), `canvas-particles` (decenas de miles de partículas fluidas), `flying-words` (nube de palabras en movimiento)
`rhythm` (Edición y Ritmo)	`cards/rhythm/` (8 tarjetas)	Eliminación de fotogramas por ritmo, interrupción rápida, división de pantalla para duelo, montaje de cortes	`beat-cut-moves` (corte rápido con flash de ritmo), `speed-ramp-freeze` (anotación congelada de cambio de velocidad), `quad-split-parallel-scenes` (línea de visión paralela en cuatro pantallas), `panel-grid-moves` (reorganización de viñetas de cómic), `rhythm-interrupt-moves` (avance con corte de salto e impacto), `trailer-grammar-moves` (campo negro de impacto de tráiler)
`commercial` (Planos Comerciales)	`cards/commercial/` (43 tarjetas)	Planos de presentación de producto, cabecera y pie de marca, introducción de tema, bloque de cierre final	`hook` (plano de gancho de punto débil), `price-card` (tarjeta de precios y planes), `features` (flujo de lista de características), `store-card` (tarjeta de ubicación de tienda), `fact-sheet` (lista de declaración de hechos), `brand-ink-open` (apertura de tinta que se extiende), `logo-shrink-wordmark-lockup` (contracción de logo y bloque de marca), `ui-to-brand-morph` (morfosis de interfaz a logotipo de marca)
`transition` (Transiciones de Plano)	`cards/transition/` (26 tarjetas)	Transformación espacio-temporal en los límites de los planos y transición de la línea de visión, eliminando cortes bruscos	`cube-rotate` (giro multidimensional de cubo 3D), `clock-wipe` (borrado de aguja de reloj), `bubble-swarm-takeover` (máscara de enjambre de burbujas), `color-block-step-wipe` (borrado por pasos de bloques de color), `paper-plane-messenger` (avión de papel en movimiento), `push-through` (empuje a través), `whip-pan` (desenfoque de barrido de cámara rápida), `dark-tunnel` (túnel oscuro en movimiento)
`media` (Presentación Multimedia)	`cards/media/` (15 tarjetas)	Composición de entrada de imágenes externas, clips de video y comparación de imagen en imagen	`media-pop-in` (aparición rápida y ligera), `split-compare` (comparación de control deslizante en pantalla dividida izquierda/derecha), `svg-path` (extensión de ruta vectorial), `video-pip-float` (imagen flotante en imagen), `photo-polaroid-scatter` (dispersión de fotos Polaroid)

Base Subyacente (cards/_shared/): Proporciona primitivas de renderizado comunes para toda la biblioteca (como SpeedBlur para desenfoque de movimiento, softShadow para sombras suaves físicas de dos capas, Stage para reflector de luz de escenario) y cálculo adaptativo de tamaño de fuente tipográfica comercial, no se expone como tarjeta independiente.

4.3. Combinaciones de Inspiración Clásica para Seis Tipos de Películas (Solo Como Inspiración, Libertad Creativa)

Las siguientes son solo referencias de combinación de inspiración para estilos comunes, no son reglas rígidas. El Agente puede mezclar y combinar libremente según la creatividad real:

Ciencia y Cultura General Explicativa (Science Explainer):
- Combinación de inspiración: typography/scramble-decode (ruptura por decodificación de caracteres) + data/particle-sand-fill (demostración de magnitud con sedimentación de arena física) + media/svg-path (línea de conexión conceptual) + transition/color-block-step-wipe.
Ensayo Filosófico y Prosa Profunda (Philosophical Essay):
- Combinación de inspiración: typography/halation-bloom (resplandor de película de alta luz) + camera/dolly-zoom (extracción de profundidad espacial) + typography/quote-card (cita elegante) + effects/canvas-particles (polvo tenue).
Producto Tecnológico y Lanzamiento de Funciones (Product Promo):
- Combinación de inspiración: effects/three-crystal (aparición de componente 3D) + interaction/command-palette-summon (invocación de productividad) + data/counter-confetti (récord de rendimiento) + transition/cube-rotate.
Estrategia Comercial y Panel de Datos (Business & Strategy):
- Combinación de inspiración: data/gauge-readout-moves (aguja de indicador) + data/chart-live-moves (crecimiento de curva) + typography/highlighter-sweep (marcado de datos) + transition/clock-wipe.
Estado de Ánimo Musical y Videoclip Dinámico (Music Story & Lyrics):
- Combinación de inspiración: typography/type-rhythm-sync (línea de letra de ritmo de verso) + typography/cel-flash-stomp (acento congelado de estribillo) + camera/shot-crash-zoom-punch (colisión de impacto) + transition/whip-pan.
Hecho a Mano Retro y Álbum de Recortes (Scrapbook & Handcrafted):
- Combinación de inspiración: interaction/masking-tape-slap (golpe de cinta adhesiva) + interaction/popup-book-rise (levantamiento de libro pop-up) + typography/split-flap-flip (flip mecánico) + transition/paper-plane-messenger.

4.4. Especificación de Ensamblaje de Cuatro Ranuras y Líneas Rojas de Calidad Objetivas

Cada escena admite cuatro ranuras desacopladas en el atributo motion de film.json:

{
  "motion": {
    "camera": { "cardId": "camera/slow-push", "params": { "scale": 1.15 } },
    "primary": { "cardId": "data/particle-sand-fill", "params": { "gravity": 1.2 } },
    "text": { "cardId": "typography/halation-bloom", "params": { "bloomIntensity": 0.8 } },
    "transitionOut": { "cardId": "transition/cube-rotate", "params": { "direction": "left" } }
  }
}

Líneas Rojas de Calidad Objetivas (Deben Cumplirse):
1. Foco Visual Claro: En una misma escena, la imagen debe tener un protagonista claro. Si se usa una animación de componente primary intensa, la cámara camera debe ser estable y respirar; si la cámara usa un shot-crash-zoom-punch fuerte, el contenido del componente debe permanecer relativamente estático, evitando una danza caótica que cause mareo visual;
2. Tiempo de Permanencia Cognitiva Suficiente (Cognitive Hold Time): Después de que la animación complete su entrada y despliegue, el texto en la pantalla y la estructura central deben conservar al menos 45 a 90 fotogramas (1.5 s a 3.0 s) de tiempo de permanencia estable, asegurando que el espectador pueda leer y comprender con calma. Está estrictamente prohibido cambiar abruptamente inmediatamente después de que se complete la animación;
3. Coincidencia de Longitud de Texto y Relación de Aspecto: Para una línea de texto horizontal, se recomienda no más de 22 caracteres chinos; para una línea vertical, no más de 14 caracteres chinos, para evitar superposiciones de saltos de línea o que el texto salga del área segura del video.

5. Protocolo de Guion Gráfico Film IR y Especificación de Renderizado Multi-Tecnología

film.json es la única fuente de verdad semántica de todo el proyecto.

5.1. Estructura Estándar de Film IR

{
  "id": "slug-del-proyecto",
  "title": "Título del Video del Proyecto",
  "genre": "explicador",
  "brief": {
    "goal": "Objetivo narrativo central",
    "audience": "Audiencia objetivo",
    "tone": "Tono y atmósfera"
  },
  "output": { "width": 1920, "height": 1080, "fps": 30 },
  "theme": {
    "background": "#0a0f1d",
    "foreground": "#f8fafc",
    "accent": "#38bdf8",
    "fontFamily": "Inter, PingFang SC, sans-serif"
  },
  "scenes": [
    {
      "id": "scene-01",
      "title": "Nombre del Plano",
      "intent": "Intención narrativa",
      "semantic": "hook",
      "durationInFrames": 90,
      "onScreenText": ["Título principal en pantalla", "Texto explicativo del subtítulo"],
      "layout": { "kind": "center-headline" },
      "renderer": "html",
      "sceneComponent": "scene/stack-explainer",
      "motion": {
        "camera": { "cardId": "camera/slow-push" },
        "primary": { "cardId": "interaction/stack-reveal" },
        "text": { "cardId": "typography/scramble-decode" },
        "transitionOut": { "cardId": "transition/cube-rotate" }
      },
      "props": {},
      "qa": { "keyFrames": [20, 45, 80] }
    }
  ]
}

5.2. Mecanismo de Adaptación de Modo Dual (16:9 ↔ 9:16)

Todas las escenas y tarjetas admiten escalado responsivo de manera unificada. Usar un contenedor de relación base en el código de la escena:

import React from 'react';
import { useVideoConfig } from 'remotion';

export const AdaptiveStage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { width, height } = useVideoConfig();
  const isPortrait = height > width;
  const baseWidth = isPortrait ? 1080 : 1920;
  const baseHeight = isPortrait ? 1920 : 1080;
  const scale = Math.min(width / baseWidth, height / baseHeight);
  return (
    <div style={{
      width: baseWidth,
      height: baseHeight,
      transform: `scale(${scale})`,
      transformOrigin: 'top left',
      overflow: 'hidden',
    }}>
      {children}
    </div>
  );
};

6. Ciclo de Vida Completo de la Cadena de Herramientas CLI e Interacción con el Banco de Trabajo Local

Comando	Descripción
`forge create`	Inicializar proyecto
`forge approve-design`	Confirmar G1 (escribe `film.json` y `design-review.md`)
`forge render --scope sample`	Renderizar fotograma de muestra para revisión G2
`forge approve-sample`	Confirmar G2 (desbloquea renderizado completo)
`forge render --project <id>`	Renderizar toda la película
`forge validate --project <id>`	Verificar integridad del proyecto (independencia, activos)
`forge dev`	Iniciar banco de trabajo de depuración visual local (basado en React, navegar por escenas)

7. Lista de Verificación de Entrega Final y Resolución de Problemas

7.1. Antes de la Entrega

¿Se ha completado la aprobación G1 y se ha ejecutado el comando approve-design?
¿Se ha completado la aprobación G2 y se ha ejecutado el comando approve-sample?
¿El renderizado final produjo un archivo MP4 sin errores?
¿El proyecto se puede ejecutar de forma independiente (sin dependencias del directorio del skill)?
¿Se han verificado todos los activos y las referencias son relativas?

7.2. Problemas Comunes

Problema	Posible Causa	Solución
Pantalla negra en el renderizado	Error en componente de escena o tarjeta faltante	Probar con `forge dev` y revisar la consola
Desincronización de audio y video	Error en la configuración de temporización	Verificar `durationInFrames` y la alineación del reloj
El texto está incompleto o se desborda	Longitud de texto demasiado larga para la relación de aspecto	Reducir la longitud del texto o cambiar a diseño vertical
El renderizado falla con error de dependencia	Falta `npm ci`	Ejecutar `npm ci` en `PROJECT_ROOT`

*Este documento es la especificación central del skill Motion Forge. Para flujos de trabajo específicos de escenarios, consulte los archivos en el directorio pipelines/.

Motion Forge: Código a Video (Code2Video) — Skill de Producción…

¿Qué es Motion Forge: Código a Video (Code2Video) — Skill de Producción…?

Preguntar en tu IA favorita

Documentación