Hyperframes — videos animados con Claude Design
HeyGen liberó Hyperframes — un render open-source que toma HTML/CSS/JS y lo convierte en MP4 con FFmpeg. La parte mágica: lo combinas con Claude Design (la superficie nueva de claude.ai) y describes el video. Claude diseña, Claude programa la animación con GSAP, Claude te empaca el ZIP. Tú corres un solo npx hyperframes render al final y tienes el video. Sin Premiere, sin After Effects, sin saber editar.
Hyperframes (HeyGen) + Claude Design (Anthropic)
La primera vez que motion graphics decentes están al alcance sin un editor profesional
Esta entrada explica qué es cada pieza, te lleva paso a paso por el setup en Claude Design web (la ruta sin instalar nada permanente), te deja seis prompts copy-paste para los videos más comunes (intro de canal, demo SaaS, anuncio Instagram, logo reveal, explainer y plantilla de citas), los comandos esenciales para el render local y la honestidad de qué funciona muy bien y qué todavía no. También cubre la ruta vía Claude Code para quienes prefieren terminal.
dos piezas que se complementan
Qué es Hyperframes y qué es Claude Design
El truco vive en combinar dos cosas que llegaron casi al mismo tiempo. Una pone el motor de render — la parte aburrida y técnica de convertir frames en un MP4. La otra pone el cerebro creativo — la parte cara, que normalmente cobra un editor freelance.
La pieza A · render
Hyperframes (HeyGen, open-source)
Un CLI escrito sobre Node y FFmpeg que toma una composición en HTML/CSS/JS y la captura frame a frame para escribir un MP4 (también MOV con alpha y WebM). Soporta GSAP 3, Lottie JSON, transiciones CSS, Three.js y shaders WebGL — todo lo que ya sabe hacer un browser moderno.
Es Apache 2.0 y vive en github.com/heygen-com/hyperframes. El repo trae el CLI, el instruction file de Claude Design y ejemplos. Lo mantiene HeyGen — sí, los del avatar AI.
La pieza B · diseñador
Claude Design (Anthropic Labs)
Una superficie nueva en claude.ai/design donde Claude trabaja como tu motion designer. Tiene canvas dedicado, preview en vivo y soporta archivos largos (instruction files, assets, referencias).
No es lo mismo que Artifacts del chat normal. Está pensado específicamente para diseño, ilustración y motion. Vive en el plan de Claude Pro ($20/mes y arriba). El soporte oficial y el anuncio de Anthropic explican el alcance.
La unión: en Claude Design subes un instruction file que enseña a Claude las convenciones de Hyperframes. A partir de ahí, le describes el video que quieres y Claude te entrega la composición lista para renderizar. El render local (npx hyperframes render) es el último paso — y es el único que toca la terminal.
por qué esto importa
Antes vs. después: lo que cambió de la noche a la mañana
Producir motion graphics solía ser un cuello de botella caro. No porque las animaciones sean difíciles de imaginar — todos sabemos cómo se ve una intro decente — sino porque traducir esa imagen mental en frames era trabajo de especialista. Eso es exactamente lo que se acaba de mover.
Antes
La ruta tradicional
- ·Premiere o After Effects (suscripción mensual)
- ·Tutoriales en YouTube + curva de meses
- ·Plugins, presets, fonts y plantillas pagadas
- ·5-30 horas para una intro de 10 segundos decente
- ·Pagar a un editor freelance ($150-$800 por video)
Después
La ruta con Claude Design + Hyperframes
- ·Cuenta de Claude Pro que ya pagas para todo lo demás
- ·Un prompt en español describiendo el video
- ·Claude Design genera HTML/CSS/JS con GSAP
- ·10-30 minutos iterando en el canvas
- ·Un solo npx hyperframes render al final
Importante: sigue siendo código real abajo. La diferencia es que tú no lo escribes. Claude lo escribe por ti, te muestra preview en el canvas y te deja iterarlo en lenguaje normal hasta que el video esté como lo querías.
ruta web · sin instalar nada permanente
Setup en Claude Design — paso a paso
Esta es la ruta principal: hacer todo el motion design dentro de claude.ai/design y solo abrir terminal una vez al final para correr el render. Son seis pasos. El cuello de botella real es el plan — necesitas Claude Pro. El resto es seguir el flujo.
01 · Verifica que tienes Claude Pro ($20)
Claude Design vive dentro de claude.ai y está gateado por el plan de pago. En el plan gratis tienes Artifacts, pero no Claude Design. Si todavía no estás en Pro, súbete antes de seguir.
El render final vas a correrlo desde tu computadora. La parte cara — el motion designer que escribe HTML, CSS, GSAP y Three.js — es la que paga Claude Pro. Es prácticamente todo lo que necesitas para reemplazar a un editor freelance.
Ver planes de Claude02 · Abre claude.ai/design
Es la superficie nueva que Anthropic abrió como parte de Claude Labs. Ahí Claude actúa como tu motion designer: escribe la composición en HTML/CSS/JS y te muestra preview en vivo.
No es lo mismo que Artifacts. Claude Design tiene canvas dedicado, controles de viewport, y soporte de archivos largos. Si nunca has entrado, el primer prompt va a sentirse como abrir Figma con un colaborador que ya sabe el brief.
Entrar a claude.ai/design03 · Sube el archivo claude-design-hyperframes.md
Es un instruction file que enseña a Claude cómo armar composiciones compatibles con Hyperframes. Lo descargas del repo, lo arrastras a Claude Design, y queda activo en esa conversación.
Es opcional pero muy recomendable. Sin el archivo, Claude diseña libre y a veces usa APIs que el render local no soporta. Con el archivo, te entrega siempre la estructura limpia que Hyperframes consume sin pelear.
Descargar claude-design-hyperframes.md04 · Describe el video que quieres
Aquí entra el prompt. Mientras más concreto seas — duración, resolución, paleta, ritmo, transiciones — mejor te entrega. Más abajo te dejo seis prompts copy-paste listos para arrancar.
Claude te muestra el preview en el canvas. Si algo no te late, le pides cambios en lenguaje normal: 'el logo entra muy rápido, alarga la entrada a 1.2s y agrégale un easeOutCubic'. Itera hasta que veas el video que quieres.
05 · Descarga el ZIP
Cuando estés contento, le pides a Claude que empaquete la composición. Te entrega un ZIP con el HTML, los assets y un manifest que Hyperframes sabe leer.
El ZIP es portable. Lo puedes guardar, versionarlo en Git, o pasarlo a otra computadora. Mientras tengas Node ≥22 y FFmpeg, el render funciona igual.
06 · Renderiza local con npx hyperframes render
Único momento en el que tocas terminal. Descomprimes el ZIP, te paras dentro de la carpeta y corres un solo comando. npx baja Hyperframes en el momento, lo ejecuta y te escupe el MP4.
Necesitas Node 22 o superior y FFmpeg instalado en el sistema. En macOS: brew install ffmpeg. En Linux: sudo apt install ffmpeg. En Windows: descarga de ffmpeg.org y agrégalo al PATH. Después de eso, npx hyperframes render hace todo.
Guía oficial de renderingHonestidad sobre el «no instalar nada»: en pasos 1 al 5 no tocas terminal — todo es web. En el paso 6 sí corres un comando, pero npx ejecuta Hyperframes una vez sin dejar nada instalado de forma permanente. Si ya tienes Node 22 y FFmpeg, el render local toma menos de un minuto.
ruta terminal · alternativa para devs
Si prefieres Claude Code en lugar de la web
La misma magia funciona en Claude Code (CLI) y en la app de escritorio cuando tiene Claude Code activo. La diferencia es que en lugar de subir el instruction file a un canvas, instalas Hyperframes como skill y desbloqueas tres slash commands.
Instala el skill en tu Claude Code
npx skills add heygen-com/hyperframes/hyperframesEl flujo guiado. Claude te pregunta el brief, escribe la composición y te ofrece renderizar al final dentro del mismo terminal.
/hyperframes-cliModo experto. Saltas el wizard y trabajas directamente con la API del CLI desde Claude Code, ideal cuando ya tienes la composición y solo quieres iterar parámetros.
/gsapAsistencia específica para escribir o auditar timelines de GSAP 3 — la librería que la mayoría de composiciones de Hyperframes usa para animar.
Cuándo conviene esta ruta: si ya vives en terminal y quieres tener todo el flujo (brief, código, render) en un solo lugar; si necesitas versionar las composiciones en Git desde el inicio; o si quieres scriptear render en batch para una serie de videos. En cualquier otro caso, Claude Design web es más cómodo.
Detalles del skill y ejemplos viven en el repo. El blog post de HeyGen anunciando la integración explica el por qué del producto.
prompts copy-paste · listos para Claude Design
Seis prompts concretos para arrancar hoy mismo
Cada prompt está afinado para que entregues a Claude Design suficiente detalle — duración, resolución, paleta, ritmo, transiciones — sin tener que escribirlo tú. Pégalo, ajusta lo que sea específico de tu marca y deja que itere. Si algo no te late, pídele cambios en lenguaje normal: «alarga el primer beat a 1.5s», «cambia el verde por #FF6B00», «el typewriter que sea más lento».
Intro de canal de YouTube · 10 segundos
Para cuando quieres dejar de usar la intro genérica. Logo entra con rebote suave, gradiente animado de fondo y typewriter del nombre del canal.
Hazme un intro de 10 segundos para mi canal de YouTube usando Hyperframes. Detalles técnicos: - Resolución: 1920x1080 - Frame rate: 30fps - Duración total: 10 segundos exactos Composición: - Fondo: gradiente animado azul cobalto (#1d3fff) → violeta neón (#7a2bff), con un movimiento sutil tipo aurora boreal de izquierda a derecha - Segundos 0-3: el logo entra desde abajo con un rebote (easeOutBack), ligero overshoot, escala 0.6 → 1.0 - Segundos 3-7: el logo se mantiene quieto, una onda de luz cruza la pantalla diagonalmente y deja un leve glow alrededor del logo - Segundos 7-10: aparece el nombre del canal abajo del logo con efecto typewriter (mono-spaced, blanco), una letra cada 80ms Tipografía: Inter para todo. Sin música — solo la animación visual. Empácalo en ZIP cuando esté listo para que pueda renderizarlo con npx hyperframes render.
Demo de feature SaaS · 8 segundos
Para una landing o un Twitter de producto. Mockup de dashboard que rota en 3D y tres etiquetas de beneficio que aparecen en cascada.
Necesito una demo de 8 segundos para promocionar una feature de mi SaaS usando Hyperframes. Especificaciones: - Resolución: 1920x1080 - Frame rate: 60fps (queremos motion fluido) - Duración: 8 segundos Composición: - Fondo: blanco minimalista (#FAFAFA) con un grid de líneas muy sutiles - Centro: mockup de dashboard (rectángulo con header, tres tarjetas y un chart) que rota suavemente en el eje Y de -8° a +8° y vuelve, en loop - Segundos 1-3: aparece la etiqueta "Tiempo real" con fade desde la derecha del mockup - Segundos 3-5: aparece "Cifrado end-to-end" debajo de la primera, mismo efecto - Segundos 5-7: aparece "Setup en 2 minutos", mismo efecto - Segundos 7-8: las tres etiquetas hacen un pulse sutil al unísono Paleta: blanco (#FAFAFA), negro (#0F0F0F) y un acento azul eléctrico (#0066FF) para los CTA. Tipografía sans-serif moderna. Empaqueta en ZIP cuando esté listo.
Reel anuncio para Instagram · 15 segundos
Vertical 9:16 con hook fuerte, tres beneficios animados con números grandes y un CTA pulsante al final. Listo para subir.
Hazme un anuncio vertical para Instagram Reels de 15 segundos usando Hyperframes. Especificaciones: - Resolución: 1080x1920 (vertical, 9:16) - Frame rate: 30fps - Duración: 15 segundos exactos Estructura por segmento: - 0-3s · HOOK: texto enorme "¿Sigues editando a mano?" centrado, tipografía display sans-serif, blanco sobre fondo negro con un sutil noise. Aparece letra por letra rápido. - 3-6s · BENEFICIO 1: ícono + número "3x más rápido". El número entra con un count-up de 0 a 3. - 6-9s · BENEFICIO 2: ícono + número "0 software extra". Mismo treatment, sustituye el anterior con un swipe vertical. - 9-12s · BENEFICIO 3: ícono + número "1 prompt = 1 video". Mismo treatment. - 12-15s · CTA: botón "Empezar ahora" en verde neón (#00FF94) que pulsa cada 0.5s, sobre fondo negro. Paleta: negro (#0A0A0A), blanco (#FFFFFF) y un solo acento verde neón (#00FF94). Sin música — solo motion. Empácalo en ZIP para renderizar.
Logo reveal cinemático · 5 segundos
Para cierres de video, intros de empresa o reveals de marca. Partículas que convergen, flash, vibración micro y tagline con typewriter.
Crea un logo reveal cinemático de 5 segundos con Hyperframes. Especificaciones: - Resolución: 1920x1080 - Frame rate: 60fps (movimiento debe sentirse premium) - Duración: 5 segundos Composición: - Fondo: negro absoluto (#000000) durante toda la pieza - Segundos 0-2: cien partículas pequeñas de luz blanca aparecen dispersas y convergen lentamente al centro de la pantalla, con trails ligeramente luminosos - Segundo 2-2.3: las partículas colapsan en un flash blanco que cubre toda la pantalla (overexposure) - Segundos 2.3-4: el flash se disipa y revela el logo en el centro, con una micro-vibración (subtle shake de ±2px durante 400ms) que se asienta - Segundos 4-5: aparece el tagline debajo del logo con typewriter rápido, en color gris claro (#CCCCCC), tipografía monospace Sin música, sin texto extra. Quiero que pueda usarlo como cierre estándar para todos mis videos. Empácalo en ZIP.
Explainer animado · 20 segundos
Tres escenas SVG flat/duotone que se transforman entre sí con morphing. Ideal para explicar un producto, un proceso o un concepto.
Necesito un explainer animado de 20 segundos sobre [TU PRODUCTO/CONCEPTO] usando Hyperframes. Especificaciones: - Resolución: 1920x1080 - Frame rate: 30fps - Duración: 20 segundos Tres escenas de ~6.5 segundos cada una con transiciones por morphing entre escenas (1 segundo de morph entre cada par): ESCENA 1 (0-6.5s): persona usando una computadora con cara de frustración (estilo SVG flat duotone, dos colores). Texto sobre la escena: "El problema actual" ESCENA 2 (6.5-13s): la misma persona, pero ahora con [TU PRODUCTO] en pantalla, expresión neutra. Texto: "Aquí entra [tu producto]" ESCENA 3 (13-20s): la persona con cara de calma, una taza de café al lado, el producto trabajando solo. Texto: "Y tú recuperas tu tiempo" Paleta pastel: rosa pálido (#FFD9E0), azul cielo (#C8E4FF), amarillo suave (#FFF4C8), gris carbón (#3A3A3A) para textos. Tipografía sans-serif friendly (tipo Nunito o similar). Empaca en ZIP cuando esté listo.
Plantilla cita para Threads/Twitter · 12 segundos
Horizontal 1920x1080 con cita aparece línea por línea (typewriter), avatar entra desde la derecha al final. Reusable para cualquier quote.
Hazme una plantilla de video para citas en Threads/Twitter, 12 segundos, usando Hyperframes. Especificaciones: - Resolución: 1920x1080 (horizontal) - Frame rate: 30fps - Duración: 12 segundos Composición: - Fondo: gris muy oscuro (#1A1A1A) con un noise sutil tipo grano de película - Segundos 0-9: aparece una cita de 3 líneas con efecto typewriter línea por línea (3 segundos por línea), tipografía serif elegante en blanco, tamaño grande, centrada - Segundos 9-11: las tres líneas hacen un pequeño slide hacia arriba para hacer espacio - Segundos 11-12: en la esquina inferior derecha aparecen el avatar circular del autor (entra desde la derecha con slide) y debajo su @handle, en color amarillo cálido (#F5C842) — el único acento de color de toda la pieza Tipografía: serif para la cita (Playfair Display o similar), monoespaciada para el handle. Diseñalo de forma que pueda cambiar la cita y el avatar fácilmente para reusar la plantilla. Empaca en ZIP.
Cómo usarlos en orden: si todavía no produces video con regularidad, empieza con el logo reveal o la intro de YouTube — son los más cortos y los que más mileage le sacas. Si vendes un producto, el demo SaaS y el reel para Instagram son los que mueven la aguja. La plantilla de citas y el explainer son para cuando ya tienes el flow agarrado y quieres reutilizar.
comandos esenciales · render local
Los cuatro comandos que necesitas conocer
Tres son prerequisitos que corres una sola vez en tu vida (verificar Node, instalar FFmpeg, instalar el skill si vas por Claude Code) y uno es el que vas a correr cada vez que quieras un video. Tenerlos a la mano evita el típico bloqueo de «Claude me dio el ZIP y ahora no sé qué hacer con él».
Render local del ZIP que te entrega Claude
npx hyperframes renderTe paras dentro de la carpeta descomprimida del ZIP y corres esto. npx baja la versión más reciente de Hyperframes en el momento — sin install permanente. El MP4 sale en la misma carpeta.
Instalar el skill en Claude Code (alternativa para devs)
npx skills add heygen-com/hyperframesSi prefieres usar Claude Code en lugar de Claude Design web, este comando te activa los slash commands /hyperframes, /hyperframes-cli y /gsap directamente en tu terminal.
Verifica tu versión de Node (necesitas 22 o superior)
node --versionHyperframes pide Node ≥ 22. Si tu versión es menor, instala Node desde nodejs.org o usa nvm: nvm install 22 && nvm use 22.
Instalar FFmpeg (prerequisito del render)
brew install ffmpegmacOS con Homebrew. En Linux/Ubuntu: sudo apt install ffmpeg. En Windows: descarga el binario de ffmpeg.org y agrégalo al PATH del sistema. Sin FFmpeg, npx hyperframes render falla.
Si npx hyperframes render falla: casi siempre es Node viejo o FFmpeg ausente. Corre node --version primero (si dice menos de 22, instala Node 22). Después which ffmpeg (si no devuelve nada, instálalo con brew/apt o desde ffmpeg.org). Esos dos errores cubren el 90% de los problemas.
qué le vas a sacar
Seis casos donde esto cambia tu producción de contenido
No todo lo que se puede animar conviene animarlo. Estos seis casos son donde Hyperframes + Claude Design da un retorno tan claro que se vuelve obvio. Los ordené de más simple a más ambicioso.
Intro de canal de YouTube
Reemplaza la intro genérica de Canva o iMovie. Mismo nivel de motion graphics que canales grandes pagan a un editor — pero hecho en 10 minutos.
Demo de producto para landing
Mockup animado de tu app rotando, transitions limpias, sin tocar After Effects. Lo embebes directo en la hero de tu landing.
Anuncio para Instagram/TikTok
Reels y TikToks verticales con hook + beneficios + CTA, en formato 9:16, listos para subir. Iteras 5 versiones en una hora.
Plantillas reusables para redes
Diseñas una plantilla — cita, número del día, frase del founder — y le cambias el contenido cada semana sin volver a tocar el motion.
Logo reveals para clientes
Si tienes agencia o haces freelance, le entregas a tus clientes un logo reveal cinemático en el mismo día que firman, no en dos semanas.
Motion explainers para producto
20 segundos animados que explican un proceso, una feature o un concepto. Más claro que un texto, más barato que contratar una agencia.
El sweet spot real: videos de menos de 30 segundos donde el contenido es tipográfico, mockup digital o ilustración SVG. En ese rango Hyperframes + Claude Design pelea de tú a tú con un editor humano y gana en tiempo y costo. Para piezas más largas o con video filmado, sigue ayudando — pero ya entran a jugar más herramientas.
honestidad · qué esperar y qué no
Lo que funciona muy bien, lo que todavía no, y los prerequisitos
Para ahorrarte la frustración de descubrir las limitaciones a medio video: aquí va el contrato real. Es una herramienta increíble para un rango concreto de casos y todavía hay zonas donde no es la mejor opción. Saberlo de entrada te hace mucho más eficiente.
Funciona muy bien para
- ·Intros, outros y bumpers de marca
- ·Demos de producto con mockups 2D/3D ligero
- ·Anuncios sociales con texto, números y mockups
- ·Plantillas reusables para redes (citas, stats, frases)
- ·Logo reveals y stings cortos
- ·Explainers animados con SVG/flat design
Todavía limitado para
- ·VFX 3D pesados estilo Hollywood (mejor Blender)
- ·Sincronía musical milimétrica (audio se monta aparte)
- ·Edición de video filmado o B-roll de cámara real
- ·Avatares parlantes con lip-sync (eso es HeyGen, no Hyperframes)
- ·Composiciones de más de ~60 segundos sin partir en escenas
Prerequisitos antes del primer render
- ·Claude Pro ($20/mes) — sin esto no entras a Claude Design
- ·Node.js ≥ 22 — el CLI de Hyperframes lo exige
- ·FFmpeg instalado en el sistema — sin esto el render falla
- ·Espacio en disco suficiente (un MP4 1080p de 10s puede pesar 5-30 MB)
Tip de calidad: el preset Standard del render usa CRF 18 — Hyperframes lo describe como «visualmente sin pérdida». Para redes sociales es overkill; el preset Draft jala bien y exporta más rápido. Reserva High solo cuando vas a entregar a un cliente o subir a un sitio donde la calidad final importa.
Guía de la comunidad
Esta entrada destila el flujo de Hyperframes (HeyGen) + Claude Design (Anthropic) para que un creador hispanohablante pueda producir motion graphics sin pasar por After Effects. Es parte de la bóveda de tododeia, una colección libre de recursos para quienes usan Claude todos los días. Documentación oficial del flujo en hyperframes.heygen.com.
Repo oficial · github.com/heygen-com/hyperframes
Código fuente del CLI, el instruction file de Claude Design y la documentación inicial. Apache 2.0, mantenido por HeyGen.
Guía Hyperframes + Claude Design
Walkthrough oficial de cómo combinar la superficie web de Claude con el render de Hyperframes. Fuente de la verdad para esta entrada.
Anuncio de Claude Design — Anthropic Labs
Post de Anthropic explicando qué es Claude Design y para qué se diseñó. Útil si quieres entender el por qué del producto.
Guía oficial de rendering
Detalles del render: presets de calidad (Draft, Standard CRF 18, High), formatos (MP4 H.264, MOV ProRes, WebM VP9 con alpha) y troubleshooting.
Claude Design
Qué es y para qué se usa
Editor Pro Max
El skill de edición de video
Animaciones
Más motion con Claude
¿Por dónde empezar si nunca has hecho motion?
Arranca con el prompt del logo reveal — son cinco segundos, una sola idea, fácil de juzgar si quedó bien. Reutiliza ese mismo flow con la intro de YouTube y la demo SaaS. Para cuando produzcas el cuarto video, ya vas a tener intuición de qué pedir y cómo iterar. Es la curva más corta que hemos visto en este tipo de herramientas.
¿Para quién no aplica esta página?
Si tu trabajo es editar video filmado, lip-sync de avatares, o piezas largas con narración compleja, esta no es tu herramienta principal — todavía. Hyperframes brilla en motion graphics 2D-3D ligero y composiciones tipográficas. Para lo otro, sigue siendo más rápido un flujo tradicional o el ecosistema completo de HeyGen.