GSAP /render 6 MP4 HTML
Guía · Abril 2026 · Morfeo Academy
Guía completa de
hypermotion.morfeoacademy.com
Launch
Hypermotion
Claude CodeHyperFramesmotionsites.ai

Tus carousels ya no son imágenes quietas — son 6 videos chiquitos que loopean solos en tu feed.

01 · Qué es Hypermotion

Carousels, pero vivos.

No es un producto nuevo. Es la combinación de dos herramientas que ya existen, usadas de una forma que nadie está usando todavía.

En vez de publicar 6 imágenes estáticas, publicás 6 videos chiquitos — uno por slide. Cada uno dura 3 a 5 segundos y loopea solo. Cuando alguien scrollea tu post en el feed, no ve carousel, ve 6 reels apilados.

El resultado es que el ojo del usuario se queda pegado. Cada slide es un hook nuevo. El watch time se multiplica por 7.

La verdad incómoda

El contenido estático ya tocó techo. En 2026, si tu carousel no se mueve en las primeras 0.5s, perdiste. Hypermotion es la forma más barata de competir con reels sin producir reels.

02 · Paso 1

Claude Code diseña tu idea.

Ya lo sabés, pero vale recordarlo: Claude Code no es solo para programar apps.

Le pedís un carousel en un prompt, y te arma el HTML + CSS completo. Colores, tipografías, layout, espacios, jerarquía visual — todo lo que haría un diseñador junior, pero en 3 minutos y sin abrir Figma.

Es la base del workflow: Claude Code es el diseñador. Vos le pasás un brief, él te devuelve un archivo HTML abierto en el browser. Todavía no hay movimiento — pero ya tenés las 6 slides del carousel, visualmente perfectas.

Pro tip

Cuanto más específico el brief (marca, tono, keywords, formato), más afilado el output. Claude Code no adivina — replica tu gusto si se lo mostrás.

03 · La herramienta 2/2

HyperFrames hace los videos.

Es open-source de HeyGen. Convierte HTML en MP4. Punto.

La lógica es simple: HyperFrames agarra el HTML que te generó Claude Code, le agrega animaciones (texto que entra, objetos que se mueven, loops), y lo renderiza como video MP4. No hay After Effects. No hay Premiere. Sin editar frame por frame.

Internamente usa Playwright + ffmpeg + GSAP, pero vos nunca los tocás. Desde tu punto de vista es un solo comando:

# renderear HTML a MP4
$ hyperframes render slide-01.html --out slide-01.mp4

Repo: github.com/heygen-com/hyperframes · Docs: hyperframes.heygen.com

04 · Resultados

Combinalas y tenés magia.

Claude Code arma. HyperFrames anima. IG lo loopea. Este mismo carousel que estás por ver es el resultado.

01Slide 01 — Cover
02Slide 02 — Claude Code
03Slide 03 — HyperFrames
04Slide 04 — Combinación
05Slide 05 — Bonus
06Slide 06 — CTA
Los 6 slides del carousel · cada uno loopea independiente

Cada slide se renderiza a un MP4 separado (1080×1350). Subís los 6 como carousel desde el celu — IG los trata como videos en loop dentro del carousel. El usuario swipea y cada tile sigue animando solo.

05 · Bonus · Nivel pro

¿Querés animaciones más locas?

motionsites.ai es una biblioteca gigante de prompts visuales, cada uno listo para pegar en Claude Code.

Vas a motionsites.ai, elegís una animación que te guste — 3D, liquid glass, particles, scroll-driven, kinetic typography — y copiás el prompt. Lo pegás en Claude Code encima del carousel base, y Claude te reescribe el HTML con ese efecto aplicado.

Así pasás de un carousel lindo a uno que parece de agencia. En 10 minutos, sin tocar Three.js ni WebGL.

Ejemplos reales

Un hero con liquid-glass pill. Un fondo de partículas que reaccionan al scroll. Text sobre video en loop. Cards con hover 3D. Todo accesible via un prompt de 15 líneas.

06 · Para copiar y pegar en Claude Code

Arrancá ahora.

Dos comandos para instalar. Un prompt para empezar. Eso es todo.

Paso 1 · Instalar HyperFrames

Corré esto en tu terminal (o pedile a Claude Code que lo corra por vos):

# agrega la skill de HyperFrames a Claude Code
$ npx skills add heygen-com/hyperframes

# valida que tengas Node, ffmpeg y Playwright
$ hyperframes doctor

Paso 2 · Pegá este prompt en Claude Code

Este es el prompt de inicio. Cambiá [TU TEMA] por el tema de tu carousel y [TU MARCA] por tu handle:

# pegá esto tal cual en Claude Code

Quiero armar un carousel animado de 6 slides para Instagram
usando el workflow "Hypermotion" (Claude Code + HyperFrames).

Tema:   [TU TEMA]
Marca:  [TU MARCA]
Formato: 6 slides, 1080×1350 cada uno,
         paleta cálida (cream + coral + acentos).

Antes de escribir código, proponeme el build plan:
  slide 1 (cover):   headline + subtítulo + CTA "swipe"
  slides 2-6:        5 tips, 1 concepto por slide,
                      headline corto con palabra italic
                      de énfasis
  slide 7 (CTA):     keyword en MAYÚSCULA para DM

Reglas:
  • HTML + CSS puro, fonts: Fraunces + Inter + JetBrains Mono
  • Cada slide se ve bien quieto antes de animar
  • Al final también generás compositions/ por slide con GSAP
  • Export a MP4 via hyperframes render --per-slide

Esperá mi aprobación del build plan antes de escribir código.

Paso 3 · Iterar y exportar

Claude Code te va a tirar el plan. Lo revisás, pedís cambios si querés. Cuando esté aprobado:

  1. Claude Code genera generate.py → 6 slides HTML listos para ver en el browser.
  2. Revisás los 7 quietos. Si alguno no convierte, lo cambiás antes de animar.
  3. Claude Code arma las 7 compositions/ con timelines GSAP.
  4. Corrés hyperframes render --per-slide y exportás los 6 MP4.
  5. Subís los 6 MP4 a IG como carousel normal. IG les pone loop.
Tiempo real

Setup: 5 min (una vez en tu vida). Carousel desde cero: 20-30 min con Claude Code. Cada carousel siguiente: 10-15 min porque reutilizás el template.

Cierre
¿Querés
más recursos
como este?

Seguime en @morfeoacademy — carousels animados, prompts reales, setups que uso todos los días para producir contenido con Claude.

O comentá HYPERMOTION en el post original y te mandamos la guía directo al DM.