Hyperframes — Videos con Claude Design

CLI sobre Node y FFmpeg que toma HTML/CSS/JS y los convierte en MP4, MOV o WebM con canal alpha. Combinado con Claude Design para describir videos y obtener el ZIP listo.

HeyGen liberó Hyperframes bajo Apache 2.0 — un CLI sobre Node y FFmpeg que toma HTML/CSS/JS y lo convierte en MP4, MOV o WebM con canal alpha. Combinado con Claude Design (claude.ai/design, requiere Pro), te permite describir un video, dejar que Claude lo diseñe con GSAP, empacar el ZIP, y correr npx hyperframes render para obtener el archivo final.

Es la cadena más simple y poderosa para producir motion graphics sin abrir After Effects.

Por qué importa

Antes de Hyperframes, las opciones para motion graphics eran:

After Effects — potente pero lento, curva pronunciada, suscripción cara.
Lottie — bueno para iconos animados, limitado para video real.
CapCut / Premiere — bueno para edición, malo para animaciones complejas.
Manim / Remotion / Motion Canvas — code-based pero requieren aprender frameworks distintos.

Hyperframes captura una idea genial: el web ya sabe animar muy bien (CSS animations, GSAP, framer motion). En lugar de inventar otro framework, tomá el HTML/CSS/JS animado y renderizalo a video.

Cómo funciona

Por debajo:

Hyperframes corre Chromium headless con tu HTML.
Frame por frame (60fps), captura screenshots.
Pasa los frames a FFmpeg.
FFmpeg los compone en MP4/MOV/WebM.
Si especificás canal alpha, el background queda transparente.

Lo brillante: si tu HTML funciona en navegador, va a renderizar igual a video. Sin sorpresas, sin "esto se veía bien pero al exportar..."

La cadena completa

Paso 1: describir el video

En claude.ai con Claude Design activo:

Quiero un video de 8 segundos para una intro de canal de YouTube
sobre productividad. Estilo: minimal, tipografía dominante.

Segundo 0-2: texto "ENFOCATE" aparece con letras una por una, blur 
inicial que se va desvaneciendo. Fondo negro.

Segundo 2-4: "ENFOCATE" se mueve hacia la izquierda y aparece a la 
derecha "EN UNA SOLA COSA" en tipografía más pequeña.

Segundo 4-6: ambas frases se desvanecen. Aparece en el centro el 
logo del canal (texto: "DIARIO DEL FOCO") con un underline 
animado que se dibuja de izquierda a derecha.

Segundo 6-8: el logo queda estático, sólo el underline pulsa. 
Termina abruptamente.

Tipografía: Inter o equivalente, font-weight 800 para el principal,
500 para el secundario.

Aspect ratio: 16:9 horizontal.

Paso 2: Claude diseña con GSAP

Claude Design entiende el brief y genera HTML completo con:

Estructura DOM mínima.
CSS con las clases y tipografía.
JavaScript con GSAP que orquesta los keyframes.
Loop preview en el browser para que vos verifiques.

Output esperado:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; background: #000; ... }
    .frase-principal { font-size: 120px; font-weight: 800; ... }
    .frase-secundaria { font-size: 60px; font-weight: 500; ... }
    .logo { ... }
    .underline { ... }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="frase-principal">ENFOCATE</h1>
    <h2 class="frase-secundaria">EN UNA SOLA COSA</h2>
    <div class="logo">DIARIO DEL FOCO</div>
    <div class="underline"></div>
  </div>
  <script src="https://unpkg.com/gsap@3"></script>
  <script>
    // Timeline con las 4 fases
    const tl = gsap.timeline();
    tl.from('.frase-principal', { duration: 2, opacity: 0, filter: 'blur(20px)', stagger: 0.05 })
      .to('.frase-principal', { x: -300, duration: 1 })
      .from('.frase-secundaria', { opacity: 0, duration: 1 }, '<')
      .to(['.frase-principal', '.frase-secundaria'], { opacity: 0, duration: 0.5 }, '+=1')
      .from('.logo', { opacity: 0, scale: 0.9, duration: 0.5 })
      .from('.underline', { scaleX: 0, transformOrigin: 'left', duration: 0.7 })
      .to('.underline', { opacity: 0.5, duration: 0.3, repeat: 4, yoyo: true });
  </script>
</body>
</html>

Paso 3: empacar el ZIP

Claude Design te genera un ZIP con la estructura que Hyperframes espera:

mi-video.zip
├── index.html
├── styles.css
├── script.js
├── assets/
│   └── (cualquier imagen/font necesaria)
└── hyperframes.config.json

hyperframes.config.json:

{
  "duration": 8,
  "fps": 60,
  "width": 1920,
  "height": 1080,
  "format": "mp4",
  "alpha": false
}

Paso 4: renderizar

Descomprimís el ZIP localmente y corrés:

npx hyperframes render ./mi-video

Tarda 30 segundos a 3 minutos según duración y resolución. Output: mi-video.mp4 en la misma carpeta.

Casos de uso reales

Caso 1: Intros y outros consistentes

Si tenés un canal de YouTube/podcast con intros recurrentes, hacés el HTML una vez y solo cambiás el texto en cada video. Re-renderizás en 30 segundos.

Caso 2: Lower thirds para entrevistas

"Juan Pérez · CEO de Acme" apareciendo con animación clean. HTML simple, podés tener template y variar contenido por entrevistado.

Caso 3: Animaciones para Reels/TikTok

Vertical 9:16. Texto que aparece sincronizado con la voz. Hyperframes te permite hacer 5 versiones con diferencias mínimas en 10 minutos.

Caso 4: Pre-render de transiciones para edición

En lugar de animar en After Effects, generás transiciones reutilizables con Hyperframes (con canal alpha). Las importás a tu editor (Premiere, DaVinci, CapCut) y las superponés sobre footage.

Caso 5: Stickers animados para WhatsApp/Telegram

WebP animado, peso bajo, calidad alta. HTML con animación de 2 segundos, render con alpha, conversión a WebP.

Power features

Render con canal alpha

El feature estrella para usuarios que editan video. Lo activás en config:

{ "alpha": true, "format": "mov" }

Resultado: MOV con transparencia. Lo arrastrás a tu editor y se superpone sobre cualquier footage.

Multiple variantes en una corrida

Si tu HTML acepta query params, generás múltiples versiones en una corrida:

npx hyperframes render ./mi-video --variants "nombre=Juan&nombre=María&nombre=Pedro"

Salen 3 archivos con la única diferencia siendo el nombre.

Custom fonts y assets

Para que custom fonts funcionen, los incluís en el ZIP y los referenciás con url() relativos. Hyperframes los carga antes del render.

Headless mode para CI

Lo podés correr en GitHub Actions:

- run: npx hyperframes render ./videos

Comprometés el HTML al repo, cada push genera videos actualizados.

Combinación con Claude Design

Claude Design (claude.ai/design) es la pieza que diseña el HTML. Sin Claude Design, podrías hacer todo manual escribiendo el HTML+CSS+GSAP, pero te lleva 1-3 horas por animación.

Con Claude Design, son 5-15 minutos.

Detalles técnicos del workflow:

Claude Design entiende GSAP, Anime.js, Motion One.
Puede generar SVG animado (sin librería) si la animación es simple.
Hace preview en su iframe interno antes de que descargues.
El ZIP que genera ya viene con la config correcta.

Limitaciones

Tres puntos honestos:

1. No es para video con acción real

Hyperframes hace motion graphics excelente. No reemplaza captura de video. Si necesitás "persona hablando frente a cámara", Hyperframes no aplica.

2. Renders largos son intensivos

Un video de 60 segundos a 4K, 60fps, son 3.600 frames. Tarda 10-30 minutos según tu máquina. Para videos largos, mejor partir en clips de 8-15 segundos y unirlos en editor.

3. Compatibilidad de fonts puede romper

Si usás font web (Google Fonts vía link tag), Chromium headless puede no cargarla a tiempo. Workaround: incluir la font como archivo en el ZIP y usar @font-face local.

Comparativa rápida

Feature	After Effects	Remotion	Hyperframes
Tecnología	Propia	React + Node	HTML/CSS/JS + Node
Curva	Pronunciada	Media (sabés React)	Mínima
Costo	$23/mes	Gratis	Gratis (Apache 2.0)
Calidad output	Premium	Premium	Premium
Sweet spot	Animación compleja	Datos dinámicos	Motion graphics rápido

Hyperframes gana en "tiempo desde idea hasta MP4". Es lo más rápido si ya sabés HTML básico.

Roadmap conocido

HeyGen mencionó en el announcement features venideras:

Audio sincronizado (pasar MP3 y se incorpora al MP4).
Multi-pasada para efectos que requieren composición.
Templates oficiales (intros, lower thirds, etc.).
Hosted rendering (no tener que correr local).

Mientras tanto, lo que existe ya cubre 90% de casos de creators.

Conclusión

Hyperframes + Claude Design es la combinación que más rápido lleva una idea de animación a archivo de video. Para creators que producen volumen — intros, lower thirds, transitions, animaciones de texto — es game changer.

Si nunca tocaste GSAP, no es problema: Claude Design lo escribe por vos. Solo pedís el efecto en español, descargás el ZIP, corres un comando. La fricción se va a cero.

Tags: hyperframes, claude-design, heygen, motion-graphics, video, gsap, ffmpeg, claude-pro