Cómo convertir automáticamente datos en vivo en videos compartibles

• Se creó un flujo de trabajo basado en la web para convertir datos en vivo, que se actualizan cada pocos días, en videos sociales sin que una persona tenga que editarlos cada vez
• La fuente del video no es un archivo de edición, sino una página web oculta; Playwright mueve el navegador cuadro por cuadro y ffmpeg los empaqueta como MP4 y GIF
• Un breve storyboard.ts y un único playhead organizan las cifras de hoy, un fade, el punto de inicio de diciembre de 2024 y un tramo de crecimiento de 18 meses en un clip de unos 14 segundos
• Una GitHub Action programada detecta cambios en los datos, recompila y redespliega el sitio, genera 4 cortes según combinaciones de relación de aspecto e idioma, y los publica en el CDN de CloudFront
• YouTube permite subir borradores no listados, pero Instagram solo admite publicaciones públicas inmediatas, por lo que se mantiene un paso de aprobación humana para la revisión final y la edición de captions

---

Usar una página web como fuente del video

• El video no parte de un proyecto de edición separado, sino de una página dedicada oculta dentro del sitio web
• Esta página está diseñada para una pantalla vertical 9:16, usada en Reels, Shorts y TikTok
• En la pantalla se reutilizan elementos existentes del sitio en vivo
  • Titular
  • Gran cifra de instituciones
  • Gráfico animado
  • Mapa nacional
  • Pequeña línea de créditos
• Se aprovechan las animaciones de timeline y efectos de movimiento del navegador web, y la computadora controla un navegador headless invisible para el usuario
• Como una página web común, puede abrirse directamente en el navegador para previsualizar y depurar avanzando y retrocediendo
• Hereda tal cual el framework multilingüe del sitio, lo que permite capturar videos por cada idioma soportado
• El asset bakery, el pipeline de datos y el frontend de este proyecto están publicados como open source

storyboard.ts y playhead

• Un solo archivo, storyboard.ts, define el timing y las transformaciones del video como una lista de tomas de un director
• La estructura se compone de algunos beats con nombre y sus duraciones
  • Mantener la cifra total de hoy durante 1.5 segundos
  • Fade de 0.7 segundos
  • Mantener durante 1.5 segundos el punto de diciembre de 2024, donde empiezan los datos
  • Luego reproducir hacia adelante el tramo de crecimiento de 18 meses
  • Volver a asentarse en la pantalla de hoy
• El resultado completo es un clip de unos 14 segundos
• El trazado del gráfico, la aparición de puntos en el mapa y el incremento del contador se mueven ligados a un único playhead
• El playhead hace que todos los componentes rendericen el mismo estado en un timestamp específico, evitando que los elementos de la pantalla queden desfasados entre sí

“Hornear” cuadro por cuadro

• El archivo de video real se crea abriendo la página web en un navegador headless y controlando Chromium con Playwright
• Al principio se pensó que se podía presionar virtualmente el botón de reproducción y capturar con grabación de pantalla, pero la grabación en tiempo real podía perder cuadros o presentar cortes
• Incluso el mismo video podía reproducirse de forma fluida en local y comportarse distinto en hardware de nube; en los primeros experimentos, a veces se reproducía anormalmente rápido
• Para obtener resultados más estables, en vez de grabación en tiempo real se genera cada cuadro uno por uno, como un flipbook
  • Se le indica a la página: “muéstrame cómo se ve en el segundo 0.04”
  • Se toma una captura de pantalla
  • Se avanza a 0.08 segundos y se toma otra captura
  • Se repite este proceso cientos de veces
• Como si se pasaran a mano las páginas congeladas, cada imagen se captura en un estado completamente renderizado
• El resultado es determinista y testeable; al ejecutarlo dos veces, debería obtenerse el mismo cuadro de forma verificable
• Si se duplica la cantidad de cuadros, también se duplican aproximadamente el tiempo de cómputo y el espacio de almacenamiento necesarios para renderizar

Detalles para estabilizar el renderizado en servidor

• El mapa nacional usa MapLibre GL JS y se renderiza con código WebGL, que normalmente espera una GPU
• Como el servidor no tiene GPU, Chromium se configura para usar renderizado por software
  • Es más lento que el hardware gráfico real
  • Puede ejecutarse con una calidad casi idéntica en casi todas las plataformas
• Cada cuadro se guarda como JPEG, no como PNG
  • En las capturas, la codificación PNG es la parte lenta
  • Como el video resultante se ve igual, se gana velocidad en el conjunto de cientos de cuadros
• Se requieren algunas flags para que el navegador headless se ejecute de forma estable en un bare server dentro de un contenedor, y todos los detalles están en el repositorio público
• Los cientos de imágenes generadas se unen con ffmpeg para producir un MP4 y un GIF en loop

Automatización basada en GitHub Action

• Todo el proceso se conecta a un pipeline automatizado de datos que se ejecuta mediante una GitHub Action programada
• Varias veces al día verifica si cambiaron los datos
• Cuando entran datos nuevos, el job hace lo siguiente
  • Recompila el sitio
  • Redespliega el sitio
  • Genera 4 cortes con combinaciones de relación cuadrada/vertical e inglés/español
  • Publica en el CDN de CloudFront
• Una página pública de descarga ofrece los cortes más recientes por cada idioma soportado
• El último paso incluye subir un borrador a YouTube y enviar una notificación para publicar en Instagram
  • El script para YouTube es publish-social-youtube.mjs
  • La notificación de preparación para Instagram es notify-social-ready.mjs
  • También está prevista la integración con TikTok

La frontera entre automatización y control editorial

• Este proyecto no descarta la automatización completa, pero mantiene una revisión humana antes de que salga cada video
• Las personas se encargan del control editorial de titulares y captions, la revisión final y la decisión sobre la forma de publicación
• Se evita la publicación automática a ciegas porque los datos de entrada pueden ser malos o el sistema puede producir resultados incorrectos
• YouTube crea videos en borrador no listados mediante su API oficial
• Como la API de Instagram solo admite publicación pública inmediata, cada vez que hay datos nuevos se crea un borrador de YouTube y se envía un aviso por email para crear manualmente la publicación de Instagram

Producción de videos sociales que termina siendo diseño web

• La ventaja de este enfoque es que el diseño de video se convierte en diseño web
• No depende de After Effects, reexportaciones manuales, cifras desactualizadas ni productores web ocupados
• Cambiar un color o una etiqueta se resuelve modificando una línea y se refleja en el siguiente renderizado
• Todo el sistema está compuesto por unos cientos de líneas de glue code alrededor de herramientas existentes
  • Pipeline de datos
  • Navegador headless
  • Mapas y gráficos que el sitio ya usa
  • ffmpeg
• El costo de ejecución es de unos pocos dólares al mes
• Como comparación, el Missouri Vehicle Stops MCP parece costar actualmente unos 50 dólares al mes
• El asset bakery tiene un costo por usuario menor que MCP, y MCP se parece más a una herramienta que ofrece una interacción más profunda con los datos

Estrategia y el rol del “shortcut”

• La estrategia es responder a las plataformas mainstream con assets autogenerados de alta calidad para compartir, y al mismo tiempo apoyar herramientas modernas de datos como MCP para usuarios que se involucran en mayor profundidad
• El objetivo no es un circo viral ni un público general indefinido, ni tampoco un producto único que sirva para todos
• El shortcut no es un engaño, sino una forma de aprovechar recursos ya existentes para llegar más lejos y agotarse menos
• Si se conectan los recursos existentes con GitHub Action, solo hace falta pensar en video cuando se quiere crear uno o cuando la situación realmente lo exige