El problema con la producción de video
La producción de video tiene un problema estructural que nadie cuestiona porque ya se normalizó: el medio más poderoso de comunicación se edita con herramientas diseñadas para arrastradores de mouse.
After Effects, Premiere, DaVinci Resolve, Final Cut, CapCut: todos operan con la misma metáfora de hace tres décadas. Una línea de tiempo, capas apiladas, keyframes manuales.
Para un editor profesional, esas herramientas son perfectas. Para alguien que quiere producir video de forma programática, repetible y versionable, son un callejón sin salida. No puedes hacer git diff de un proyecto de After Effects. No puedes parametrizar una template de Premiere con variables. No puedes automatizar la producción de 50 cápsulas de podcast sin que un humano mueva clips a mano.
Lo que necesitaba era un renderer de video que hablara el mismo idioma que el resto de mis sistemas: código.
Qué es HyperFrames
HyperFrames es un framework de HeyGen que renderiza video a partir de composiciones HTML. La idea central es tan simple que parece trampa: escribes un archivo HTML con divs, CSS y animaciones GSAP, le pones atributos de timing (data-start, data-duration), y el framework lo captura frame por frame con un headless browser para producir un MP4.
Todo es un archivo de texto que puedes versionar, parametrizar y generar programáticamente.
Una composición mínima se ve así:
<div id="root"
data-composition-id="main"
data-start="0" data-duration="10"
data-width="1920" data-height="1080">
<div id="title" class="clip"
data-start="0" data-duration="10" data-track-index="1">
<span class="title">El Universo <strong>Cuántico</strong></span>
</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 32, duration: 0.9, ease: "power3.out" }, 1.0);
window.__timelines["main"] = tl;
</script>Eso es un video. Diez segundos. Un título que aparece con fade-up en el segundo 1. Renderizable a 1920x1080 con npx hyperframes render. El resultado es un MP4 con exactamente la misma calidad visual que verías abriendo ese HTML en Chrome. Porque eso es exactamente lo que el renderer hace.
Por qué funciona para mí
Vengo del audio. Antes de hacer revenue B2B y antes de estudiar física cuántica, diseñaba sistemas de sonido. En audio, todo es código y parámetros: frecuencias, filtros, enrutamiento de señal. Nadie arrastra ondas sinusoidales con el mouse. Las defines con ecuaciones.
Cuando empecé a producir video para mis proyectos (la serie de YouTube Mensajes del Infinito, las cápsulas de podcast de Territorio Fintech, los promos para Numen), sentí la misma fricción que sentiría un programador obligado a usar Excel en vez de Python. Las herramientas de video son poderosas, pero su interfaz es un cuello de botella cognitivo. Cada cambio requiere navegar menús, ajustar keyframes con el mouse, renderizar para ver el resultado.
Con HyperFrames, el ciclo es otro: edito el HTML, corro npx hyperframes preview, veo el resultado en el browser, ajusto, renderizo. Es el mismo loop de desarrollo que usaría para una webapp. Y eso cambia todo, porque puedo aplicar las mismas herramientas que uso para código: variables CSS, componentes reutilizables, generación programática.
Caso 1: Cápsulas de podcast con captions branded
El caso de uso que más horas me ha ahorrado es la producción de cápsulas virales para podcasts. Tenemos un podcast B2B (Territorio Fintech) y necesitamos extraer clips de 45-60 segundos con captions estilo Diary of the CEO para Instagram y TikTok.
El pipeline funciona así:
- Whisper Large V3 transcribe el episodio completo con timestamps por palabra
- Un sistema de agentes selecciona los 5 mejores momentos virales (hook, dato, escala, conflicto, cierre)
- FFmpeg corta y reencuadra cada segmento a 9:16 vertical
- Python genera un overlay de captions frame por frame: tipografía Neue Haas Display, palabras clave en púrpura, lower-thirds branded con nombre y cargo del speaker
- FFmpeg compone el overlay sobre el video recortado
El script de Python que hace el captioning (build_v2.py) tiene 440 líneas. Define la paleta de marca, los tamaños tipográficos, las reglas de énfasis (qué palabras se agrandan y cambian de color), el lower-third con nombre y cargo, y la end card con gradiente. Todo renderizado pixel por pixel con Pillow.
Lo que antes tomaba 2-3 horas por cápsula (un editor seleccionando el clip, cortando, agregando subtítulos a mano en CapCut, ajustando el branding) ahora son 4 minutos de ejecución automatizada. Y cada cápsula sale con el mismo nivel de consistencia visual porque los parámetros de marca están codificados, no interpretados por un humano diferente cada vez.
Caso 2: Videos contemplativos de 2 minutos con voiceover
Numen es un proyecto personal. Genera lecturas personalizadas basadas en la carta natal de cada persona y las convierte en videos cinematográficos con voiceover sintético. Cada video dura unos 2 minutos y tiene 11 escenas: una portada con el logotipo, preguntas que aparecen con typographic reveals, interludios visuales con orbes radiales que pulsan, y un cierre en tonos cálidos.
Todo es un solo archivo index.html de 360 líneas. El CSS define la paleta (un sistema de colores que llamo “void/penumbra/ivory/ultraviolet”), las tipografías (Cinzel para headings, Spectral para cuerpo en itálica), y los orbes decorativos con radial-gradient. Las animaciones son timelines de GSAP: cada escena tiene su data-start y data-duration, y el timeline orquesta fades, scales y translateY con precision de centésimas de segundo.
Lo que hace esto interesante es la parametrización. Cada video de Numen usa el mismo template visual, pero el contenido cambia por persona. Un config.yaml define el nombre, el kin, las preguntas, los textos de cada capítulo. El sistema genera el HTML con esos datos, sintetiza el voiceover con ElevenLabs o Kokoro, y renderiza. La misma composición ha producido videos para Hans, Mariana, Paula, Dorian. Cuatro identidades visuales idénticas en calidad, cuatro contenidos completamente distintos.
En After Effects, parametrizar una template así requiere expressions, linked compositions y un workflow que se quiebra cada vez que actualizas el diseño. En HyperFrames, es string interpolation.
Caso 3: Explainers de física cuántica para YouTube
Mensajes del Infinito es una serie donde explico conceptos de física cuántica con animaciones. El estilo visual es deliberado: fondo negro absoluto, tipografía serif (IBM Plex Serif), un solo color de acento dorado, diagramas que se dibujan con stroke-dasharray, y un ritmo lento con pausas dramáticas entre revelaciones.
Tengo un design system completo documentado en un archivo de 340 líneas (guia-visual-mensajes-del-infinito.md) que especifica 6 tipos de escena: texto cinematográfico, diagrama técnico, definición/revelación, tabla/comparación, animación conceptual y pizarrón nostálgico. Cada tipo tiene su paleta, su tipografía, su cadencia de animación y sus reglas de composición.
Con HyperFrames, ese design system no es un PDF que alguien interpreta. Es CSS que el renderer ejecuta. Los principios de movimiento (“todo movimiento es suave y deliberado, easing principal cubic-bezier(0.4, 0, 0.2, 1), velocidad base 0.6-1.2 segundos”) se traducen directamente a parámetros de GSAP. Las reglas de color (“máximo 3 colores visibles en cualquier frame excluyendo blanco y negro”) son verificables mirando el código.
La primera composición que hice para esta serie fue un title card de 10 segundos: fondo negro con grid de líneas púrpura tenues, partículas flotantes, el título “El Universo Cuántico” con reveal progresivo, y un badge inferior. 228 líneas de HTML+CSS+GSAP. Renderizado limpio a 1080p.
Lo que esto implica para la producción de contenido
No estoy argumentando que HyperFrames reemplace a un editor profesional de video. Un documental, una película, un video musical con footage real necesitan herramientas de edición tradicionales. Lo que estoy argumentando es algo más específico: hay una categoría entera de video (motion graphics, explainers, lower-thirds, captions, title cards, promos tipográficas, animaciones de datos) que no necesita una timeline. Necesita un compilador.
La producción de video programático tiene las mismas ventajas que la infraestructura como código tuvo sobre la configuración manual de servidores: es repetible, versionable, parametrizable y automatizable. Puedes generar 50 variaciones de un promo cambiando un JSON. Puedes mantener consistencia de marca con variables CSS en vez de guías de estilo que nadie lee. Puedes correr un git blame para saber quién cambió qué y cuándo.
Y cuando combinas esto con un pipeline de AI (transcripción automática, selección de clips con agentes, voiceover sintético, generación de copy), el resultado es un sistema donde la producción de video escala como escala el software: con iteración rápida, con feedback loops cortos, con calidad determinística.
El estado actual
Llevo dos meses usando HyperFrames en producción. He renderizado cápsulas de podcast para clientes, videos personalizados de Numen, title cards para YouTube y pruebas de explainers animados. El framework sigue en desarrollo activo (la versión actual es 0.6.x), tiene rough edges, y hay cosas que todavía requieren workarounds creativos.
Pero la premisa funciona. HTML como lenguaje de descripción de video no es una metáfora forzada. Es una consecuencia natural de que los browsers ya son los renderers más sofisticados del planeta. Saben hacer tipografía, gradientes, animaciones, composición de capas, blending modes. Lo único que les faltaba era alguien que capturara cada frame y lo empaquetara como video.
Lo que más me interesa no es el framework en sí, sino la dirección que señala: un mundo donde producir video tiene el mismo nivel de abstracción que producir una webapp. Donde el video no es un archivo binario opaco sino un repositorio de código con historial, branches y CI/CD.
Suena raro. Pero también sonaba raro la infraestructura como código antes de Terraform. Las mejores herramientas siempre terminan siendo texto.