Inspirado en los skills virales de vídeo programático con Remotion de 2026: convierte una idea en guion, storyboard escena a escena y especificación técnica de componentes React lista para implementar.
Cuándo usarlo: Planificar y arrancar un vídeo explicativo animado generado con código, reutilizable con datos variables
Herramienta recomendada: Claude
Actúa como director creativo de motion graphics y desarrollador con experiencia en Remotion (vídeo hecho con React). Vas a preparar todo lo necesario para producir un vídeo explicativo animado de forma programática, de manera que pueda implementarse escena a escena sin improvisar. contexto: - Producto, concepto o idea que hay que explicar: [descripción] - Público objetivo: [quién lo verá y qué sabe ya] - Objetivo del vídeo: [entender cómo funciona, registrarse, compartir, vender...] - Duración objetivo: [segundos, por defecto 60-90] - Formato: [1920x1080, 1080x1920, 1080x1080] - FPS: [30 o 60] - Identidad visual: [colores en hexadecimal, tipografías, logotipo, estilo plano / 3D / ilustrado] - Voz en off: [sí, con texto para locutar / no, solo texto en pantalla y música] - Datos dinámicos: [¿el vídeo debe generarse con datos variables, p. ej. nombre del cliente o cifras? descríbelos] tarea: 1. Escribe el guion con la estructura problema - consecuencia - solución - cómo funciona - prueba - llamada a la acción. Cada frase de locución debe durar como máximo 4 segundos. 2. Crea el storyboard escena a escena. Para cada escena indica: número, rango de fotogramas (inicio y fin), duración en segundos, texto de locución, texto en pantalla, elementos visuales, animación de entrada, animación de salida y transición a la siguiente escena. 3. Diseña la especificación técnica para Remotion: - Estructura de la composición principal y de las secuencias (Sequence) con sus fotogramas. - Lista de componentes reutilizables (p. ej. TituloAnimado, TarjetaDato, IconoConEtiqueta, BarraProgreso) con sus props y tipos. - Esquema de props de entrada para los datos dinámicos, con valores por defecto. - Animaciones: qué usar con interpolate y qué con spring, con valores orientativos de damping y duración. - Recursos: imágenes, iconos, audio y fuentes necesarios, y dónde ubicarlos en la carpeta pública. 4. Propón la sincronización con el audio: en qué fotograma debe arrancar cada frase de locución y cada efecto de sonido. Formato de salida: 1. Guion completo con tiempos. 2. Tabla de storyboard. 3. Árbol de archivos propuesto del proyecto. 4. Especificación de componentes (nombre, responsabilidad, props, animación). 5. Esqueleto de código de la composición principal con las secuencias y comentarios, sin implementar el detalle visual de cada componente. 6. Lista de comprobación antes de renderizar: legibilidad del texto (mínimo 3 segundos en pantalla por frase), contraste, zonas seguras, duración total y peso del render. Reglas: - Un solo mensaje por escena; si una escena necesita explicar dos cosas, divídela. - No uses más de dos tipografías ni más de cuatro colores principales. - Si falta información de marca, propón una paleta y márcala como provisional. - Mantén el código en TypeScript y explica cualquier decisión que no sea obvia.