HyperFrames para webs: dos landing pages inmersivas con motion graphics hechas por Claude Code (demo, ventajas y tiempos)

HyperFrames nació para convertir HTML en vídeo, pero sus composiciones también se pueden reproducir en directo dentro de una página con su componente <hyperframes-player>. Queríamos saber si eso sirve para hacer webs con motion graphics de verdad, así que le pedimos a Claude Code dos landing pages de ejemplo: una marca de bicicletas eléctricas y una de autos eléctricos. Sin vídeo grabado: cada escena es SVG y GSAP corriendo en el navegador, y avanza con el scroll.

Aquí tienes las dos demos en vivo, cómo se hicieron, qué skills usó Claude, cuánto tardó (medido con la hora del sistema) y en qué casos conviene usar HyperFrames en una web y en cuáles no.

Si todavía no sabes qué es HyperFrames ni cómo se instala, empieza por nuestro primer artículo sobre HyperFrames, donde hicimos dos vídeos MP4 con voz y música. Este es la continuación: mismo framework, otro uso.

Las dos demos en vivo

Ábrelas en otra pestaña y baja despacio con el scroll, porque las capturas no transmiten el movimiento:

• [Demo 1: Páramo, bicicletas eléctricas de altura](/demos/hyperframes/bicis/index.html)
• [Demo 2: Cauce, un coupé eléctrico diseñado en el túnel de viento](/demos/hyperframes/autos/index.html)

Las dos marcas son ficticias y los datos (precios, autonomía, potencia) son de ejemplo. Funcionan en escritorio y en móvil, y si tu sistema tiene activado "reducir movimiento" muestran directamente el estado final de cada escena.

Primer intento: correcto, pero de plantilla

La primera versión la hizo Claude solo con las skills de HyperFrames, en unos 11 minutos. Funcionaba: cabecera animada en bucle, tarjetas, ficha técnica con contadores. Pero tenía todos los tics de una landing generada: fondo oscuro con acento cian, degradados, tipografía de catálogo SaaS y animaciones que se reproducían solas sin relación con lo que hacía el usuario. La respuesta del propietario del blog fue directa: se notaba que no habían pasado por skills de diseño web y animación.

Tenía razón. Así que repetimos el encargo con otras herramientas y otro enfoque, y este artículo cuenta la segunda versión, que es la que está publicada.

Las skills que usó Claude

El encargo pedía usar find-skills para buscar skills extra. Desde nuestro contenedor en la nube el registro skills.sh está bloqueado (npx skills find devuelve *No skills found*), así que Claude clonó directamente desde GitHub los repositorios que habría encontrado. Tardó 13 segundos en traer cinco:

A eso se suman las diez skills que instala la propia CLI de HyperFrames con init (hyperframes-core, hyperframes-animation, hyperframes-creative, motion-graphics…), que ya usamos en el primer intento.

La técnica: una composición controlada por el scroll

Una composición de HyperFrames es un index.html con un lienzo de tamaño fijo, una línea de tiempo de GSAP en pausa registrada en window.__timelines y animación determinista. Normalmente el reproductor la reproduce como un vídeo. El cambio de la segunda versión es no darle al *play*: la página mueve la composición con el scroll llamando a player.seek() desde ScrollTrigger.

window.hfScrub = function (player, vars) {
  whenReady(player, (dur) => {
    if (reduce) { player.seek(dur); return; } // reducir movimiento: estado final
    ScrollTrigger.create(Object.assign({ scrub: true }, vars, {
      onUpdate: (self) => {
        player.seek(self.progress * dur);
        if (vars.onUpdate) vars.onUpdate(self);
      },
    }));
    player.seek(0);
  });
};

Y en la página, cada escena es una sección alta con un contenedor *sticky* que ocupa la pantalla:

<section id="ascenso" style="height: 400vh">
  <div class="sticky"><!-- position: sticky; top: 0; height: 100vh -->
    <div class="cover">
      <hyperframes-player id="hfAscenso" src="motion/ascenso/index.html"
        runtime-src="../vendor/hyperframe.runtime.iife.js" muted audio-locked>
      </hyperframes-player>
    </div>
    <h1>Arriba se respira distinto.</h1>
  </div>
</section>
<script>
  hfScrub(document.getElementById("hfAscenso"), {
    trigger: "#ascenso", start: "top top", end: "bottom bottom", scrub: 0.6,
  });
</script>

La otra decisión importante: las composiciones no llevan texto. Titulares, cifras y botones son HTML normal encima de la escena, y leen el mismo progreso del scroll (el altímetro, el coeficiente aerodinámico, los km/h). Eso arregla tres problemas del primer intento: Google y los lectores de pantalla ven el texto, el texto se adapta al móvil y no se pixela.

Demo 1: Páramo, subir del valle al volcán

Paleta tomada del páramo andino: basalto, musgo, frailejón, hielo y un cobalto de cielo de altura, con amarillo de señalización como único acento. Tipografía Archivo, una variable con eje de anchura, e Instrument Sans para el texto.

• El ascenso. Una composición de 10 s con cinco capas de montaña generadas con un PRNG con semilla (siempre dibuja las mismas), un volcán nevado, nubes y frailejones. Al bajar, las capas se separan en paralaje, el cielo se oscurece, el sol sube por detrás del volcán y un ciclista recorre el sendero. A la vez, el altímetro HTML cuenta de 2.850 a 4.300 m, aparecen tres notas por altura y el titular se ensancha de 62 % a 100 % con el eje de anchura de la fuente.

• La gama. Tres bicicletas en un carrusel horizontal que avanza con el scroll vertical. Las ruedas y las bielas giran según la distancia recorrida y cada panel tiene su color.
• La ruta. Un perfil de elevación de 6 s (Zumbahua a Quilotoa) que se reproduce una vez al entrar en pantalla, con distancia, desnivel y batería restante.

Demo 2: Cauce, el coche que diseñó el viento

Para los autos, una paleta clara de túnel de viento: gris niebla, grafito, azul tinta y un rojo anaranjado de señal para el humo de referencia. Tipografía Michroma, ancha y técnica, solo para titulares y cifras, con IBM Plex Sans para el texto.

• El túnel. El coche empieza como un boceto cuadrado y, al bajar, la carrocería se transforma en un coupé de techo descendente. Las líneas de humo se recalculan en cada fotograma a partir de la forma: con el boceto, la estela se rompe en turbulencias; con la forma final, el aire se pega al techo. El coeficiente Cd baja de 0,30 a 0,21 siguiendo la misma curva.

• El color. Cuatro muestras de pintura cambian el coche en directo. La carrocería usa una variable CSS --paint dentro de la composición, y la página la anima con GSAP a través de player.iframeElement.

• El 0 a 100. Una composición que dura exactamente 3,4 s, lo que tarda el coche en llegar a 100 km/h. Las marcas de la carretera, los postes y las montañas se mueven con aceleración constante (8,17 m/s²), las ruedas giran según la distancia y el coche se hunde de atrás al arrancar. Encima, el velocímetro y el cronómetro en HTML.

Cuánto tardó Claude en hacerlo todo

Medimos con date -u y la hora de modificación de cada archivo.

Primer intento (el de plantilla): 11 minutos desde clonar HyperFrames hasta tener las dos webs funcionando, con cuatro composiciones en bucle.

Segunda versión (la publicada):

En total, unos 28 minutos sumando las dos versiones, más las capturas para este artículo. En ese tiempo Claude escribió cuatro composiciones nuevas, dos webs y el puente con ScrollTrigger, y las revisó con capturas de Playwright a 1440 px y a 390 px.

Para ser justos con la cifra: no hubo fotos, ni marca real, ni rondas con un cliente. En un proyecto de verdad, con tus fotos o renders y una o dos rondas de cambios, calcula entre medio día y un día por web.

Qué tal quedan

Mucho mejor que el primer intento, y la diferencia no la puso HyperFrames: la pusieron las skills de diseño y GSAP. Con las mismas herramientas de animación, la primera versión parecía una plantilla y la segunda tiene una idea por web (subir una montaña, darle forma al viento) que se cuenta con el scroll. Los colores salen del tema y no de una paleta genérica, y no hay ni un degradado.

Lo que todavía delata que es una demo:

• Las ilustraciones son planas. Montañas, bicis y coche son SVG dibujado con código. Para una marca real querrías renders o fotos, y HyperFrames los admite (<img>, <video>, Lottie, Three.js), pero hay que dárselos.
• El recorte en móvil hay que pensarlo. Una composición es un lienzo 16:9 fijo. En vertical la web de bicis la recorta como fondo y mueve la cámara con el scroll para seguir al ciclista; la de autos la encoge para que el coche quepa entero y rellena el suelo con su color. Las dos soluciones funcionan, pero son trabajo extra.

Ventajas de usar HyperFrames en una web

• El linter y las capturas le dan ojos al agente. hyperframes check renderiza la animación y mide: contraste, desbordamientos, pivotes de giro. snapshot saca fotogramas en los segundos que pidas. Claude los usó en cada composición antes de montarla en la web.
• Una escena, dos formatos. El ascenso o el 0 a 100 se exportan a MP4 para redes con npx hyperframes render, sin tocar el código.
• Se puede controlar desde fuera. Con seek() la composición deja de ser un vídeo y pasa a ser una escena que manda el scroll, y con variables CSS la página puede cambiarle el color en directo.
• Determinista. Las montañas usan un generador con semilla: el mismo scroll da siempre el mismo fotograma, en la web y en el render.
• Es HTML, SVG y GSAP. Cualquiera que sepa front-end puede editarlo a mano. Licencia Apache 2.0, uso comercial permitido.

Desventajas y límites

• Peso. El runtime ocupa 531 KB y el reproductor 109 KB, más GSAP y ScrollTrigger: unos 750 KB sin comprimir antes de la primera escena. Cada composición carga además su propia copia de GSAP dentro del iframe.
• Un iframe por escena. Cada reproductor es un documento aparte. Con tres o cuatro escenas va bien; con veinte, no.
• No uses pin de ScrollTrigger. Al fijar la sección, ScrollTrigger mueve el reproductor en el DOM y el iframe se recarga (en Chromium veíamos peticiones canceladas en bucle). La solución fue usar secciones con position: sticky.
• El reproductor no respeta prefers-reduced-motion por sí solo. Lo resolvimos en hfScrub: si el usuario pide menos movimiento, salta al último fotograma.
• Las skills piensan en vídeo. Hablan de render, MP4 y aprobación antes de exportar. El uso con scroll no aparece en la documentación: lo montamos nosotros con seek().
• Para algo así de interactivo, GSAP solo también vale. HyperFrames compensa si además quieres sacar las escenas en vídeo, o si quieres que el agente valide cada animación con check y snapshot.

Errores que encontramos (y la solución)

Cannot set properties of undefined (setting 'main'). La skill hyperframes-core dice que el runtime crea window.__timelines. Dentro de <hyperframes-player> el runtime se inyecta después y la composición se queda en blanco. Solución: añade la línea antes de crear la línea de tiempo.

window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });

El reproductor intenta cargar el runtime desde jsDelivr. En nuestro contenedor ese dominio estaba bloqueado, y en producción tampoco conviene depender de un CDN. Solución: copia hyperframe.runtime.iife.js desde node_modules/@hyperframes/core/dist/ y apúntalo con runtime-src.

El iframe se recargaba al hacer scroll. Era el pin de ScrollTrigger, como contamos arriba. Solución: secciones altas con un hijo sticky.

gsap_non_transform_motion al animar letterSpacing. El linter lo rechaza porque salta de píxel en píxel. En la segunda versión el titular se ensancha con el eje de anchura de la fuente (font-stretch), que es HTML de la página y no pasa por el linter.

sweep_static: "Nothing on screen moved under seek". Aparece en las composiciones que redibujan rutas SVG con setAttribute (el humo del túnel, la carretera) en vez de animar propiedades. Es un aviso, no un error: las capturas de snapshot confirman que sí se mueven.

Preguntas frecuentes

¿Puedo usar HyperFrames en una web sin renderizar vídeo? Sí. El componente <hyperframes-player> reproduce la composición en directo en el navegador. No hace falta FFmpeg en el servidor.

¿Se puede controlar una composición con el scroll? Sí, con player.seek(segundos). Conecta el progreso de un ScrollTrigger con la duración de la composición, como en hfScrub arriba.

¿Funciona con Next.js o React? Sí. Importas @hyperframes/player en un componente de cliente y usas la etiqueta <hyperframes-player>. Las composiciones van en public/.

¿Necesito saber GSAP? Para pedírselo a Claude, no. Para retocar a mano, ayuda: cada movimiento es una línea tl.to(...) con su tiempo.

¿Se puede usar gratis en proyectos de clientes? Sí, la licencia Apache 2.0 permite uso comercial. Revisa las licencias de las fuentes e imágenes que añadas; las de estas demos son de Fontsource (OFL).

Conclusión

HyperFrames sirve para webs inmersivas si lo usas como motor de escenas y no como reproductor de vídeo: la página manda con el scroll, el texto queda en HTML y cada escena se puede exportar a MP4 cuando la necesites. Lo que marca la diferencia en el resultado no es la herramienta de animación, sino darle al agente criterio de diseño: con las skills de diseño y de GSAP, la misma tarea pasó de plantilla a algo que se puede enseñar.

El siguiente paso: abre las demos de bicicletas y autos y baja despacio. Si quieres probarlo tú, empieza por instalar HyperFrames, y si te interesa cómo Claude Code aprende estas tareas, mira la guía de skills de Claude Code.