HyperFrames
Qué es HyperFrames: por qué una página HTML necesita un reloj de vídeo
Entiende cómo HyperFrames convierte HTML y animaciones posicionables en MP4, qué exige la reproducibilidad y cuándo conviene este flujo de creación.
Qué aprenderás
- El renderizador necesita tiempo explícito, no solo una animación que se reproduce.
- Programación de clips y control de animación son contratos conectados pero diferentes.
- Recursos, fuentes, datos y ajustes también determinan la reproducibilidad.
Antes de empezar
- HTML, CSS y JavaScript básicos
- Node.js 22+ y FFmpeg para el ejercicio local
Explica la frontera del capítulo y utiliza su lista para evaluar un flujo de vídeo repetible.
Conclusiones clave
- El renderizador necesita tiempo explícito, no solo una animación que se reproduce.
- Programación de clips y control de animación son contratos conectados pero diferentes.
- Recursos, fuentes, datos y ajustes también determinan la reproducibilidad.
De una página que reproduce a un fotograma que puedes pedir
HyperFrames es un framework abierto para crear vídeo con HTML, CSS, medios y animaciones que pueden situarse en un instante concreto. El README describe un renderizador que posiciona la composición en Chrome sin interfaz y codifica los fotogramas con FFmpeg. La idea importante no es simplemente grabar una ventana: el renderizador debe poder solicitar un fotograma específico.
Una animación ligada al tiempo real avanza porque transcurre el tiempo. Una composición posicionable obtiene su estado visible de un valor temporal explícito. Esa diferencia importa al saltar, revisar fotogramas o distribuir trabajo. Si una animación solo funciona después de reproducirse desde el principio, todavía no constituye una composición fiable con acceso por fotograma.
HTML aporta estructura; la temporización aporta el contrato de vídeo
La composición documentada utiliza atributos data para identificarla y declarar dimensiones, inicios, duraciones y pistas. El ejemplo con GSAP crea una línea temporal pausada y la registra mediante el identificador de composición. Esas dos superficies conectan la creación web con un reloj que el renderizador puede controlar.
El proyecto incluye CLI, núcleo, motor de captura, productor, catálogo, editor, reproductor y un paquete de renderizado distribuido. Puedes evaluar una composición local sin adoptar un editor ni un servicio externo. Separa asistencia de creación, previsualización y renderizado final: tienen dependencias y formas de fallo distintas.
Úsalo cuando ayude un sistema visual repetible
El enfoque HTML resulta atractivo para anuncios de producto con plantillas, explicaciones gráficas, subtítulos y piezas animadas reutilizables. El equipo puede revisar código y compartir reglas tipográficas. Puede ser menos conveniente cuando el trabajo principal consiste en editar manualmente material largo con cortes precisos en una aplicación de montaje establecida.
El README presenta el vídeo determinista como objetivo. La reproducción práctica también exige fijar recursos, fuentes, versiones, datos y ajustes. Una imagen remota cambiante o una escena inicializada al azar puede modificar la salida aunque el HTML sea idéntico. Verifica la repetibilidad con una muestra; no la des por garantizada por obtener un MP4.
Pasos de implementación
- 1
Elige una pieza breve y repetible.
- 2
Define dimensiones, duración y estados visuales conocidos.
- 3
Fija dependencias y recursos durante la primera evaluación.
Ejemplo para copiar
<div data-composition-id="intro" data-start="0"
data-width="1920" data-height="1080"
style="width:1920px;height:1080px;background:#101827;color:white">
<h1 class="clip" data-start="0" data-duration="6"
data-track-index="0">Un título de seis segundos</h1>
</div>Preguntas frecuentes
¿Es simplemente un grabador de pantalla?
El flujo documentado posiciona la composición en tiempos de fotograma antes de capturar, en lugar de grabar lo que muestre una página que avanza libremente.
¿El mismo HTML garantiza el mismo vídeo?
No basta. Recursos, fuentes, scripts, datos, estado de animación y configuración del renderizador también influyen.
Fuentes
- README fijadoFuente verificada 2026-09-07
- Adaptador GSAPFuente verificada 2026-09-07
- Despachador temporalFuente verificada 2026-09-07
- Adaptador Three.jsFuente verificada 2026-09-07
- Pruebas GSAPFuente verificada 2026-09-07
- Pruebas del despachadorFuente verificada 2026-09-07