Habilidad Adaptativa de Motion Graphics con React y Remotion

Esta habilidad guía el diseño, la dirección de arte consciente del contexto, la estructuración narrativa fluida y el renderizado headless de motion graphics de nivel profesional utilizando React y Remotion.

Filosofía central: "La forma sigue al contexto." Nunca impongas una plantilla rígida o un número fijo de actos en cada video. Evalúa primero la marca, la duración, la relación de aspecto y la audiencia, y luego selecciona de forma autónoma el arquetipo estructural ideal y el lenguaje de diseño moderno para construir una composición React a medida.

1. Consulta y Evaluación de Activos Prevuelo (Paso 0)

Antes de escribir código o renderizar, ejecuta la Consulta de Activos y Diagnóstico de Contexto:

🎯 Regla de Consulta de Activos Obligatoria (에셋 보유 여부 질의 필수 규칙)

A menos que el usuario ya haya proporcionado explícitamente archivos de imagen, logotipos o tokens de diseño en su mensaje, DEBES preguntar activamente al usuario sobre sus activos existentes:

Plantilla de Consulta de Activos (Asset Inquiry Template): "¿Tienes algún activo como logotipo de marca (SVG/PNG), capturas de pantalla del producto, fotos reales, colores oficiales (HEX), eslogan/copy para usar en el video?

Si tienes activos: Indícame las rutas de los archivos o colócalos en la carpeta public/ del proyecto para mapearlos con precisión en el video.

Si no tienes activos o prefieres que lo haga yo ('tú hazlo'): Yo mismo reconstruiré los vectores de la identidad corporativa oficial de la marca/organización y diseñaré desde cero los visuales cinematográficos y componentes de interfaz de usuario personalizados."

Enrutamiento de Ejecución de Activos en 3 Vías:

Vía A (Activos Proporcionados por el Usuario):
- Verifica primero el espacio de trabajo local o la carpeta public/.
- Incorpora rutas vectoriales SVG, imágenes de alta resolución y capturas de pantalla mediante staticFile('...').
- Aplica micro-paneo Ken Burns (references/asset-orchestration.md) y maquetas en perspectiva 3D.
Vía B (Sin Activos / Generación Autónoma):
- Si el usuario dice "no tengo", "tú hazlo" o no proporciona activos: nunca te detengas ni te bloquees.
- Reconstruye de forma autónoma las marcas vectoriales de la identidad corporativa oficial (CI) (references/brand-identity-and-ci.md).
- Sintetiza metáforas visuales auténticas del dominio, tarjetas estilizadas, insignias vectoriales y motivos geométricos.
Vía C (Orquestación Híbrida):
- El usuario proporciona solo un logotipo o una URL: extrae tokens de color, construye de forma autónoma la interfaz de usuario del producto, los paneles y el mundo narrativo a su alrededor.

Diagnóstico del Contexto del Proyecto (4 Dimensiones)

1. Plataforma Objetivo y Relación de Aspecto:
   • 16:9 Paisaje (1920×1080)  -> YouTube, páginas de aterrizaje principales, reels de presentación
   • 9:16 Vertical (1080×1920)   -> TikTok, Reels de Instagram, YouTube Shorts
   • 1:1 Cuadrado (1440×1440)      -> Feeds de Twitter/X, publicaciones de Instagram, bucles táctiles de interfaz de usuario
   • 4:5 Retrato (1080×1350)    -> Feeds de marketing social

2. Duración y Ritmo:
   • Ultra-corto (3–7s)   -> Bumper de logo cinético, motivo de firma en bucle, micro-interacción
   • Corto (8–15s)   -> Reel social de alta retención, característica viral de producto, elevator pitch
   • Medio (15–30s)  -> Película completa de identidad de marca, lanzamiento integral de producto
   • Largo (30–60s)   -> Explicador de producto en múltiples capítulos, aniversario de empresa, reel

3. Identidad de la Entidad y Tono:
   • Empresa / Aerolínea / Automotriz -> Digno, expansivo, aerodinámico, lujoso
   • Tecnología de alto crecimiento / SaaS / IA -> Preciso, táctil, de alta velocidad, titanio oscuro
   • Académico / Universitario / Cultural -> Histórico, autoritario, serifa editorial, intelectual
   • Consumidor / Creativo / Estilo de vida -> Vibrante, táctil, elástico, juego tipográfico

4. Arco Narrativo y Jerarquía del Mensaje:
   • Gancho (0–20%) -> Fundamentación/Característica (20–70%) -> Remate de Marca y CTA (70–100%)

2. Arquetipos Estructurales Adaptativos

Selecciona la estructura narrativa que se adapte naturalmente a la duración y al objetivo: nunca fuerces un molde rígido de 4 actos cuando un bucle ágil o un golpe de 2 tiempos sea superior:

Arquetipo	Duración Típica	Ritmo y Estructura de Escenas	Mejor Usado Para
A. Bumper Cinético / Micro-bucle	`3s – 6s` (6–12 tiempos)	Impulso de enfoque único: Gancho visual instantáneo → Mutación continua y sin costuras → Bloqueo del logotipo principal (delta de costura del bucle < 0.05).	Presentaciones de logotipo, bucles de interfaz de usuario característicos, estados de carga de aplicaciones
B. Reel Social Vertical / Shorts	`8s – 15s` (16–30 tiempos)	Regla de los 3 segundos: 0–1s Gancho audaz que detiene el pulgar → 2–10s Fundamentación cinética rápida (3 cortes rápidos escalonados) → 11–15s Llamada a la acción (CTA) contundente.	Reels de Instagram, TikTok, YouTube Shorts
C. Película Narrativa de Marca	`15s – 30s` (30–60 tiempos)	Arco Sinfónico de 4 Actos: La Partida/Gancho (0–20%) → La Sustancia/Red (20–55%) → La Elevación Estratosférica (55–80%) → El Remate Icónico (80–100%).	Grandes películas de marca (ej. Korean Air, lanzamiento a nivel Apple)
D. Explicador Multi-Capítulo	`30s – 60s` (60–120 tiempos)	Viaje por Capítulos: Gancho del Punto Débil → Desglose Arquitectónico → Demostración Profunda de Características → Prueba Social y Ecosistema → Bloqueo Final de Marca.	Explicadores SaaS, resúmenes institucionales, presentaciones para inversores
E. Mutación de Forma Continua	Cualquier duración	Identidad Ininterrumpida: Un contenedor principal nunca se corta ni sale de la pantalla; muta continuamente dimensión, radio y contenido interno.	Exhibición táctil de interfaz de usuario, bucles de mutación de producto

3. El Espectro del Lenguaje de Diseño Moderno

Selecciona de forma autónoma el lenguaje visual que coincida con la personalidad de la entidad:

[1. Neo-Brutalista Suizo]    Cuadrículas ultra-disciplinadas, sans grotesca audaz (Geist, Inter), alto contraste papel/tinta, cero relleno.
[2. Titanio Oscuro de Lujo]   Estética Apple/Stripe, obsidiana profunda (#0B0C10), bordes de 1px de grosor, destellos metálicos, oro/bermellón cálido.
[3. Serifa Editorial y Cine] Dignidad académica y cultural, serifa moderna audaz (Instrument Serif, Editorial New), papel cálido, espaciado entre letras.
[4. Medio Tono Óptico y Punto] Artesanía gráfica de estudio, matriz de puntos dinámica y receptiva, transiciones de onda de medio tono, ambiente retro-moderno.
[5. Interfaz de Usuario Física Táctil]    Maestría en SaaS y herramientas, resortes físicos de presión, arrastre elástico, pestañas líquidas, cursores físicos.
[6. Aerodinámico Cinematográfico]  Aviación, automoción, movilidad; trayectorias de vuelo amplias, HUDs de telemetría, iluminación de horizonte, escala expansiva.
[7. Pop Vibrante y Geometría] Aplicaciones creativas, herramientas de consumo; bloques de color planos audaces, transiciones de forma elásticas, tipografía contundente.

(Consulta references/design-styles.md para recetas de código, paletas y combinaciones tipográficas para cada estilo).

4. Arquitectura del Proyecto Remotion

Cada proyecto utiliza la estructura verificada de Remotion sin números mágicos:

my-motion-project/
├── package.json             # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts       # Aceleración GPU D3D11 de Chrome/Edge del sistema
├── tsconfig.json            # ES2022, NodeNext, jsx: react-jsx
└── src/
    ├── index.ts             # Punto de entrada registerRoot(Root)
    ├── Root.tsx             # Registro de <Composition> (dimensiones, fps, duración)
    ├── compositions/        # Línea de tiempo de la composición maestra
    ├── scenes/              # Escenas modulares <Sequence>
    ├── components/          # Componentes reutilizables: logotipos de marca, cursores, maquetas
    └── constants/           # Paleta, ayudantes de temporización a 120 BPM, tipografía

`remotion.config.ts` (Integración con Chrome del Sistema)

import { Config } from '@remotion/cli/config';
import fs from 'node:fs';

const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';

if (fs.existsSync(chromePath)) {
  Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
  Config.setBrowserExecutable(edgePath);
}

Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);

5. CLI de Ejecución y Renderizado

# 1. Vista previa interactiva de estudio (línea de tiempo desplazable y HMR en tiempo real)
npm run preview   # o: npx remotion preview src/index.ts

# 2. Renderizar MP4 maestro a 60fps
npm run build     # o: npx remotion render src/index.ts <CompId> out.mp4

# 3. Capturar fotograma clave de alta resolución
npx remotion still src/index.ts <CompId> still_frame.png --frame=60

6. Índice de Documentación de Referencia

Al crear aspectos específicos de un motion graphic, consulta estas guías detalladas:

structural-archetypes.md: 5 planos estructurales (Micro-bucles, Reels Sociales, Películas de Marca, Explicadores Multi-capítulo, Morfos Continuos).
design-styles.md: 7 estilos de diseño moderno (Suizo Neo-Brutalista, Titanio Oscuro, Serifa Editorial, Medio Tono Óptico, Interfaz de Usuario Táctil, Movilidad Cinemática, Pop Vibrante) con paletas y tipografía.
brand-identity-and-ci.md: Reconstrucción autónoma de CI vectorial, mecánicas de revelación de logotipo, reglas de color y motivos de marca.
storytelling-and-narrative.md: Arco narrativo, metáforas visuales, transiciones de objetos compartidos y ritmo.
asset-orchestration.md: Panorámica/zoom Ken Burns, maquetas en perspectiva, insignias vectoriales SVG y jerarquía visual.
remotion-patterns.md: Mecánica de resortes, interpolate(), contenedores de cámara, cascadas escalonadas y orquestación de <Sequence>.
ui-motion-recipes.md: Cursores, contadores en vivo, deslizadores, modales, tarjetas de notificación y gráficos.
remotion-qa-and-verification.md: Bucle de QA de 3 pasos, lista de verificación de póster de 10 puntos y renderizado headless con GPU.
timing.md: Cuadrículas de tiempo musical a 120 BPM, matemáticas de fotogramas, compensaciones escalonadas y límites de espera.
motion-math.md: Resortes armónicos, PRNG con semilla y zoom de cámara logarítmico.
gotchas.md: Trampas de renderizado de Chromium, preserve-3d, máscaras de desbordamiento y evitación de desenfoque de texto.

ll7098ll/motion-graphics

¿Qué es motion-graphics?

Preguntar en tu IA favorita

Documentación

Habilidad Adaptativa de Motion Graphics con React y Remotion

1. Consulta y Evaluación de Activos Prevuelo (Paso 0)

🎯 Regla de Consulta de Activos Obligatoria (에셋 보유 여부 질의 필수 규칙)

Enrutamiento de Ejecución de Activos en 3 Vías:

Diagnóstico del Contexto del Proyecto (4 Dimensiones)

2. Arquetipos Estructurales Adaptativos

3. El Espectro del Lenguaje de Diseño Moderno

4. Arquitectura del Proyecto Remotion

`remotion.config.ts` (Integración con Chrome del Sistema)

5. CLI de Ejecución y Renderizado

6. Índice de Documentación de Referencia

Skills relacionados

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

Preguntar en tu IA favorita

Documentación

Habilidad Adaptativa de Motion Graphics con React y Remotion

1. Consulta y Evaluación de Activos Prevuelo (Paso 0)

🎯 Regla de Consulta de Activos Obligatoria (에셋 보유 여부 질의 필수 규칙)

Enrutamiento de Ejecución de Activos en 3 Vías:

Diagnóstico del Contexto del Proyecto (4 Dimensiones)

2. Arquetipos Estructurales Adaptativos

3. El Espectro del Lenguaje de Diseño Moderno

4. Arquitectura del Proyecto Remotion

remotion.config.ts (Integración con Chrome del Sistema)

5. CLI de Ejecución y Renderizado

6. Índice de Documentación de Referencia

Skills relacionados

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

`remotion.config.ts` (Integración con Chrome del Sistema)