walter-io/vibecoding-remotion

Remotion: Video de narración de historias

Convierte "una historia" en un video de 1080p de principio a fin: lee la historia → extrae la esencia temática → diseña un lenguaje visual exclusivo para ese tema → divide en "segmentos (capítulos) → planos (unidades visuales)" → diseña para cada plano animaciones escénicas que coincidan con la emoción de la trama → texto con ritmo → renderizado → inspección.

Primer principio: El estilo sirve al tema, sin plantilla fija

La pipeline y la metodología son genéricas; el estilo visual debe rediseñarse según el tema.

• Para cada nueva historia, primero realiza un "análisis de esencia temática": ¿cuáles son las palabras clave de esta historia? (¿nostalgia? ¿pasión? ¿suspenso? ¿cuento de hadas? ¿ciencia ficción?) → deduce la paleta de colores, la tipografía, el ritmo de animación y el estilo escénico.
• Ejemplos (solo como referencia de ideas, no como norma): tono de recuerdos cálidos → serif Song Ti + blanco crema/dorado + ritmo lento con luz suave; tono deportivo/pasión → sans-serif negrita + rojo/negro de alta saturación + cortes rápidos y golpes fuertes; tono ciencia ficción → colores fríos + fuente monoespaciada + efectos de fallo/líneas de escaneo; tono cuento de hadas → fuente redondeada + colores macaron + animaciones elásticas.
• No arrastres el estilo del proyecto anterior al siguiente; si el usuario no especifica, primero ofrece 1-2 opciones de estilo para que elija.

Conceptos centrales

• La imagen cuenta la historia: Cada plano debe coincidir con la emoción y acción de la línea correspondiente (línea de terremoto → aula temblando; línea de vítores → multitud ondeando banderas; línea de cola → filas con barreras). La discrepancia (tristeza con alegría) es el mayor tabú.
• Las escenas usan animación programática (siluetas de personajes/formas geométricas + movimiento desfasado por sin, cuadro a cuadro), sin imágenes estáticas; la densidad de animación se define según el tema (temas suaves: pocas y lentas; temas intensos: muchas y rápidas).
• La tipografía es parte de la actuación: la personalidad de la fuente, la jerarquía de tamaño y los colores de énfasis de palabras clave se derivan del tema.

Pipeline (cinco pasos, orden fijo)

1. Derivación de estilo: Palabras clave del tema → paleta de colores / personalidad tipográfica / ritmo de animación / estilo escénico → (si no se especifica, ofrecer opciones al usuario).
2. Descomposición de la historia: Divide por arco argumental en segmentos (capítulos) → planos (1-2 líneas por plano); al final de cada segmento, extrae una frase corta como tarjeta de resumen; limpia la puntuación al final de las líneas (clean_tail() limpieza universal).
3. Línea de tiempo gen_assets.py → timeline.json (inicio/fin de plano, formato, puntos de ritmo; MIN_SHOT 3.5s como base para cortes lentos, ajustable por tema).
4. Auditoría de aserciones + sincronización check_views.py (cobertura de mapeo/fuera de rango) + verify_timeline.py (puntuación al final de línea = 0 / plano más corto ≥ 3.0s / duración de tarjeta de resumen / etiqueta de edad, umbrales ajustables por tema) — cualquier fallo impide el renderizado → sync-timeline.mjs.
5. Renderizado + inspección npx remotion render → ffmpeg extrae fotogramas clave para revisión (emoción de escena / jerarquía de texto / sincronización de animación).

Reglas estrictas (independientes del tema, siempre vigentes)

• Sin puntuación al final de las líneas (incluyendo guiones): función de limpieza universal + aserción = 0.
• Coincidencia estricta entre imagen y emoción del diálogo; si se cambia la asignación de SHOT_VIEW, se debe volver a ejecutar la auditoría.
• En Sequences anidadas, el punto de origen de la animación de los componentes hijos = el fotograma de inicio de su plano (pasa startFrame), de lo contrario la animación de entrada se omite silenciosamente.
• Representación estándar de símbolos políticos (bandera nacional = fondo rojo + una estrella grande y cuatro pequeñas), prohibido cualquier boceto aproximado.
• Para cambiar a locución real: coloca el wav y vuelve a ejecutar gen_assets para reordenar automáticamente la línea de tiempo.

Activos existentes (implementación de referencia, reutilizable y modificable)

templates/ proviene del proyecto finalizado "Crónicas de la generación de los 90" (tema de recuerdos cálidos: serif Song Ti + blanco crema/dorado + ritmo lento + siluetas de multitudes) — es un ejemplo de derivación de tema, no el estilo predeterminado:

• Esqueleto reutilizable directamente: gen_assets.py (texto → estructura de línea de tiempo) / check_views.py (auditoría de mapeo) / verify_timeline.py (aserción integral) / sync-timeline.mjs / fit.ts (ajuste de línea) / beat.ts (punto de ritmo).
• Capa visual a reescribir por tema: theme.ts (paleta/tamaño de fuente) / serif.ts (tipografía) / scenes.tsx (animaciones de escena) / TitleCard.tsx / Era.tsx / Intro.tsx (formatos).
• 8 técnicas de animación de siluetas transferibles: multitud ondeando banderas, gente mirando TV, aula de terremoto, filas, peatones con mascarilla, persiguiendo a un niño para darle de comer, fuegos artificiales, linternas (cambia paleta y estilo visual y se convierte en una nueva escena).

Parámetros detallados

references/spec.md: Parámetros completos de la implementación de referencia anterior (cinco niveles de tamaño de fuente, cuatro direcciones de entrada, profundidad de campo, duración de desvanecimiento lento, escala de colores de silueta); el nuevo tema puede ajustar las cantidades en referencia a estos, sin necesidad de copiar los valores exactos.