Pro Motion Graphics (V2)

Pro Motion Graphics (Arquitectura V2)

Construye videos de gráficos animados nítidos, deterministas y con calidad de estudio que parezcan creados por un director técnico de motion graphics senior. Esta habilidad impone estándares visuales estrictos anti-slop, física matemática, enrutamiento multi-motor y un pipeline de producción integral de 10 etapas.

---

Cuándo activar esta habilidad

• Generar código de video programático (Remotion / React, HTML/CSS/SVG + GSAP, o HTML5 Canvas).
• Construir categorías de video: Reels/Shorts para redes sociales (9:16), Promociones de Marca (16:9 / 1:1), Lanzamientos de Productos SaaS, Micro-Demos de UI, Tipografía Cinética Cinematográfica o Videos Explicativos Técnicos.
• Refactorizar animaciones que parecen "basura de IA" (manchas borrosas, brillos de malla neón, gradientes genéricos, desvanecimientos CSS sin anclaje, easing lineal mecánico).
• Planificar storyboards precisos por fotograma, temporización matemática y sincronización de diseño de sonido antes de escribir código.

---

Reglas de ejecución del modelo (Optimizadas para Sonnet y Haiku)

1. Números sobre adjetivos: Traduce todas las intenciones estéticas directamente en tokens numéricos exactos (conteo de fotogramas, stiffness/damping de resorte, curvas cubic-bezier, incrementos de rejilla de 8px y colores hex/OKLCH). Nunca describas el pulido visual con adjetivos vagos.
2. Matemática de fotogramas determinista: Cada animación debe estar impulsada estrictamente por una variable frame o un progress de línea de tiempo explícito ($0.0 \to 1.0$). Nunca uses Math.random() sin semilla, setTimeout o keyframes CSS infinite sin anclaje que se desincronicen durante el renderizado.
3. Solo propiedades seguras para GPU: Anima transform (translate3d, scale, rotate), opacity, clip-path o stroke-dashoffset de SVG. Nunca animes width, height, top, left o filter: blur() pesado por fotograma.
4. Higiene de las Reglas de Hooks de React: En Remotion, spring() es una función de cálculo pura. Nunca prefijes ayudantes matemáticos con use (por ejemplo, usa getStaggerSpringProgress(), no useStaggerSpring()) para evitar violaciones de las Reglas de Hooks de React dentro de bucles .map().

---

Matriz de enrutamiento multi-motor

Antes de generar el código del proyecto, evalúa el brief contra la Guía de selección de motor:

• Motor A: Remotion (React): Mejor para maquetas de UI complejas, lanzamientos SaaS, videos multi-escena modulares, reels basados en datos y renderizado por CLI con precisión de fotograma.
• Motor B: HTML/CSS/SVG + GSAP: Mejor para tipografía cinética, manifiestos de marca editoriales, animaciones de trazo SVG de logotipos y reproducción ligera en navegador. Consulta Patrones GSAP.
• Motor C: HTML5 Canvas: Mejor para gráficos procedurales, redes de partículas, animaciones matemáticas y efectos visuales generativos.

---

El pipeline de producción de video de 10 etapas

Sigue estas etapas secuenciales para cada proyecto:

Etapa 1: Comprender el brief

Identifica la plataforma objetivo, la relación de aspecto, la duración ($t$), los FPS, el mensaje central, el tono visual y los activos disponibles. Haz solo preguntas esenciales faltantes (máximo 4 viñetas). Si los detalles no están especificados, aplica los valores predeterminados del estudio:

• Relación de aspecto: 16:9 (1920x1080) para Escritorio/Web; 9:16 (1080x1920) para Redes Sociales.
• Fotogramas por segundo: 60fps para UI y Redes Sociales; 30fps para Editorial y Explicativos; 24fps para Tipo Cinematográfico.

Etapa 2: Enrutamiento de categoría

Asigna la solicitud a uno de los 6 planos de categoría en Guías de categoría:

• Categoría A: Reels, TikToks y Shorts para Redes Sociales (9:16, 60fps, 12s–30s)
• Categoría B: Promoción de Marca y Manifiesto (16:9 / 1:1, 30fps, 20s–45s)
• Categoría C: Video de Lanzamiento de Producto SaaS (16:9, 60fps, 45s–90s)
• Categoría D: Destacado de Función / Micro-Demo de UI (1:1 / 4:5, 60fps, 10s–25s)
• Categoría E: Tipografía Cinética Cinematográfica (16:9 / 9:16, 24/30fps, 15s–45s)
• Categoría F: Videos Explicativos y Educativos (16:9, 30/60fps, 45s–120s). Detallado en Guía de videos explicativos.

Etapa 3: Descubrimiento y verificación de activos

Recopila activos de marca auténticos (logotipos, capturas de pantalla de UI, fuentes, paletas de colores).

• Mantén los logotipos de marca genuinos intactos sin distorsionar la relación de aspecto.
• Nunca reemplaces capturas de pantalla de productos reales con UI de marcador de posición fabricada cuando se suministren capturas auténticas.
• Verifica las rutas de los activos usando scripts/check-assets.

Etapa 4: Planificación del storyboard y temporización matemática

Construye una tabla de línea de tiempo explícita calculando los números de fotograma a partir de los segundos y los FPS: $$\text{frame} = \text{round}(t \times fps)$$ Define los tiempos de inicio/fin de cada escena, descripciones visuales, transiciones de cámara y señales de audio. Asegúrate de que las duraciones de las escenas coincidan con la duración total objetivo sin superposiciones accidentales.

Etapa 5: Sistema de diseño centralizado (BRAND_CONFIG)

Establece los tokens de diseño antes de escribir el JSX/HTML de la escena:

• Colores: Elige un sistema curado de Reglas anti-slop (Swiss Technical Dark, Editorial Warm Paper o Kinetic Mono).
• Tipografía: Sigue la Guía de tipografía (Texto de exhibición con tracking negativo -0.04em + Metadatos Monoespaciados con tracking positivo +0.08em + tabular-nums).
• Geometría: Aplica matemática de radio de esquina concéntrica: $R_{inner} = \max(0, R_{outer} - Padding)$.

Etapa 6: Código de producción modular

Genera código modular y limpio basado en el iniciador de motor elegido en templates/:

• templates/remotion-starter/: Composición modular de Remotion con config.ts, motion.ts y componentes.
• templates/gsap-starter/: Configuración de línea de tiempo GSAP determinista por fotograma.
• templates/canvas-starter/: Bucle de dibujo de canvas 2D procedural. Verifica la estructura con scripts/validate-project.

Etapa 7: Audio y diseño de sonido

Incorpora capas de sonido siguiendo la Guía de diseño de audio:

• Reduce el volumen de la música de fondo entre 12 y 16 dB durante los segmentos de locución.
• Alinea los whooshes de transición 2 fotogramas antes del punto medio visual; alinea los golpes de impacto en el fotograma de contacto visual exacto.
• Asegúrate de que toda la música esté libre de derechos de autor / licenciada para uso comercial.

Etapa 8: Renderizado y codificación

Renderiza usando configuraciones deterministas de alta calidad:

# Remotion Web MP4 de alta calidad (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18

Etapa 9: Aseguramiento de calidad visual

Ejecuta la Lista de verificación de calidad de video:

• Renderiza fotogramas de vista previa estáticos al 25%, 50%, 75% y 100% de la duración (npx remotion still ... --frame=N).
• Audita el recorte de texto, la alineación de la rejilla de 8px, las relaciones de contraste y las zonas seguras (9:16 superior 220px / inferior 340px).
• Verifica la salida final del video usando scripts/inspect-output out/video.mp4.

Etapa 10: Entrega y traspaso

Proporciona:

1. Archivo de salida de video renderizado (o comando de renderizado reproducible exacto).
2. Proyecto fuente limpio que coincida con la arquitectura de la plantilla.
3. Activos referenciados organizados en public/.
4. Instrucciones de ejecución y registros de verificación.

---

Puertas de calidad obligatorias

Antes de concluir cualquier tarea de gráficos animados, verifica:

• Sin manchas genéricas de filter: blur() ni gradientes de IA de púrpura a azul.
• Sin violaciones de las Reglas de Hooks de React (usa ayudantes puros como getStaggerSpringProgress).
• Todas las animaciones impulsadas de forma determinista por frame o progress normalizado.
• node scripts/validate-project.js <project-dir> sale con código 0.
• node scripts/check-assets.js <project-dir> sale con código 0.
• Salida renderizada verificada mediante node scripts/inspect-output.js <output-path>.