Clase en vivo · Club de la IA

Motion graphics con Opus 5.5

Tú le dices a Claude qué video quieres y él lo programa, lo anima y lo exporta a MP4. Puedes meter tus fotos, tus videos, tu logo, tu música y tu voz. No necesitas After Effects ni saber programar: todo pasa en el chat.

Este promo de 15 s lo hizo Claude con HyperFrames: 12 trabajos reales, cámara 3D y el logo del Club. Exportarlo tomó 21 segundos. Ve cómo se lo pedimos →
01 · Qué puedes hacer

Un motion designer que escucha

Claude no genera el video como un modelo de IA de video. Escribe el código de cada cuadro: por eso el texto sale perfecto, los colores son exactos y cualquier cosa se puede corregir pidiéndola.

Texto

Tipografía animada

Títulos que caen y rebotan, palabras que entran al ritmo, contadores, gráficas que crecen.

Cámara

Movimientos en 3D

Cámaras que vuelan entre tarjetas, giros, profundidad, cosas que pasan cerca de la cámara.

Tu material

Fotos y videos tuyos

Montajes con tus trabajos, tus clips dentro de marcos, collages que se mueven.

Marca

Tu logo y tus colores

Le das tu logo y tu paleta una vez y todo el video sale con tu identidad.

Sonido

Tu música y tu voz

Cortes que caen en el ritmo de la canción, narración con tu voz y subtítulos automáticos.

Referencias

"Hazlo como este"

Le pasas un video que te gustó, lo analiza cuadro por cuadro y recrea el estilo con tus cosas.

02 · Qué necesitas

Tres cosas y Claude instala el resto

1

La app de Claude

En tu computadora, en la pestaña Code. Ahí Claude puede crear archivos, instalar herramientas y exportar videos. El chat normal de claude.ai no puede exportar MP4.

2

Un plan de pago

Pro o superior, con el modelo Opus 5.5 seleccionado. Es el que mejor anima.

3

Una carpeta con tus cosas

Logo, fotos, videos, música, voz. Te explicamos cómo armarla en el paso 04.

💡

Por dentro se usa Node.js 22 o más nuevo y FFmpeg (el programa que arma el MP4). No los instales a mano: en el siguiente paso le pides a Claude que revise y que instale lo que falte.

03 · Instalar

HyperFrames: el motor que recomendamos

HyperFrames es gratuito y de código abierto (de HeyGen). Cada video es una página web que se convierte en MP4, así que Claude lo escribe con mucha soltura. Trae skills: instrucciones que le enseñan a Claude a animar bien.

Pídeselo así

Instala HyperFrames y sus skills para hacer videos. Revisa primero que tenga Node.js 22 o más nuevo y FFmpeg; si falta algo, instálalo. Al final corre el diagnóstico de HyperFrames y dime si todo quedó bien.

Por si quieres saber qué va a correr Claude:

# instala las skills de HyperFrames
npx skills add heygen-com/hyperframes

# revisa que todo esté listo (Node, FFmpeg, Chrome)
npx hyperframes doctor
↻

Cuando termine, abre una sesión nueva de Claude Code. Las skills nuevas se cargan al empezar la sesión.

¿Y Remotion?

Remotion es la otra herramienta popular para hacer video con código. Hace lo mismo con otra tecnología (React). Esta es la diferencia:

HyperFramesRemotion
Con qué se escribeHTML y CSS, como una página webReact y TypeScript
Un video sueltoIgual de buenoIgual de bueno
Muchos videos desde una lista de datosSí, en lote, pero todos salen con la misma duración y el mismo tamañoSí, y cada video toma su propia duración y formato de sus datos
Cortes al ritmo de la músicaTrae detección de ritmo integradaClaude tiene que medir el ritmo por su cuenta
Visuales que reaccionan a la músicaSí, preparando el audio antesSí, directo de la canción
ExtrasVoz local, quitar fondo, detección de ritmoCualquier componente de React (3D con React Three Fiber, gráficas); exportar el video dentro del navegador
PrecioGratis siempre (código abierto)Gratis para personas y equipos chicos; empresas más grandes pagan licencia (revisa sus términos)

Lo probamos con el mismo material: mira la comparación con videos →

Si quieres probar Remotion, pídeselo así:

Crea un proyecto de Remotion en una carpeta nueva llamada mi-remotion e instala sus skills oficiales. Haz un video de prueba de 2 segundos para confirmar que todo funciona.
# lo que corre Claude por dentro
npx create-video@latest
npx skills add remotion-dev/skills
⚠️

Usa uno a la vez. Si tienes las skills de los dos en la misma carpeta, Claude puede dudar cuál usar cuando le pides "haz un video". Dile siempre cuál quieres: "hazlo con HyperFrames".

04 · Tu carpeta

Una carpeta, todas tus cosas

Claude trabaja con lo que encuentra en la carpeta del proyecto. Si tus archivos están ordenados, no tienes que explicarle nada: "usa los videos de la carpeta videos" y listo.

mi-video/
├── logo/          tu logo (SVG o PNG con fondo transparente)
├── marca.md       colores y tipografías, si los tienes
├── fotos/
├── videos/        clips cortos: 2 a 10 segundos
├── musica/
├── voz/           tu narración (nota de voz del celular)
└── referencias/   videos que te gustaron

Pídeselo así

Crea una carpeta de proyecto llamada mi-video con las subcarpetas logo, fotos, videos, musica, voz y referencias. Ábremela en el Finder para meter mis archivos.
  • Nombres claros: "logo-blanco.svg", "producto-frente.jpg". Claude lee los nombres para entender qué es cada cosa.
  • Clips cortos: si tu video dura 3 minutos, dile qué parte usar ("del segundo 12 al 18").
  • Tu fuente: si tu marca usa una tipografía especial, mete el archivo (.ttf, .otf o .woff) en la carpeta.
05 · Tu video con tus cosas

Pídelo por capas

No metas todo en un solo mensaje. Primero la idea con tu material, luego la marca, luego el sonido. Así revisas cada cosa y corriges a tiempo.

Paso 1Idea + material

Lo que quieres decir

Con HyperFrames, haz un video vertical (9:16) de 20 segundos que presente mi trabajo. Usa las fotos de fotos/ y los clips de videos/. Empieza con un título fuerte, luego un montaje con mis trabajos y al final mi nombre de usuario. Antes de animar, cuéntame tu idea escena por escena.
Paso 2Marca

Tu logo y tus colores

Usa mi logo de logo/ en el cierre y los colores y tipografías de marca.md en todo el video. Que el logo aparezca con un rebote.
Paso 3Música

Cortes al ritmo

Usa la canción de musica/. Busca la parte con más energía, que los cortes del montaje caigan en el ritmo y que la música baje al final.
Paso 4Voz

Tu narración + subtítulos

Usa mi grabación de voz/ como narración. Transcríbela en español y pon subtítulos palabra por palabra con mis colores. Baja la música cuando yo hable.
Paso 5Revisión

Ver antes de exportar

Ábreme la vista previa para revisarlo y enséñame una hoja con fotogramas de cada escena.
Paso 6Exportar

Tu MP4

Ya quedó. Renderízalo en MP4 y dime dónde lo guardaste.
🎙️

Tu voz: grábala con la app de notas de voz del celular, en un lugar callado, y pásala a la carpeta voz/. Si prefieres una voz clonada (por ejemplo con ElevenLabs), eso cuesta créditos: pídele a Claude que te diga el costo antes de generarla.

06 · Referencias

"Hazme uno como este"

Claude no ve videos como tú, pero sí puede sacarles fotogramas y estudiarlos: cuánto dura cada toma, cómo entran los textos, qué tipo de transición usa, cómo se mueve la cámara. Con eso recrea el estilo usando tus cosas.

1

Desarma

Saca fotogramas con FFmpeg y arma hojas de contacto.

2

Mide

Ritmo, duración de cada toma, transiciones, tipografía, colores.

3

Recrea

Construye su versión con tu logo, tu texto y tu material.

4

Compara

Pone cuadros de tu versión junto a la referencia para ajustar.

Pídeselo así

En referencias/ dejé un video que me gusta. Analízalo: saca fotogramas y dime su ritmo, cuánto dura cada toma, las transiciones, la tipografía y los movimientos de cámara. Luego recrea ese estilo con HyperFrames usando mi logo, mis colores y mis videos. No copies sus imágenes ni sus textos.
Ponme fotogramas de mi versión junto a los de la referencia, en los mismos segundos, para ver qué falta.

Ejemplo real: de inglés a español

Teníamos un video en inglés que muestra cómo se instala el complemento de Higgsfield en ChatGPT, y lo necesitábamos en español. Claude lo recreó completo: no tradujo el video, lo volvió a construir cuadro por cuadro.

Original (inglés)Recreación de Claude (español)
Tú(adjuntando el video) Necesito recrear esta animación, pero en español. ¿Cómo le hago?
ClaudeSacó los cuadros del original para estudiar los tiempos de cada pantalla. Preguntó cómo traducir "Plugins" y qué modelo mostrar en el ejemplo.
TúHay que decir "complementos" porque así viene en el chat original de GPT. Sí, cambia de modelo.
ClaudeRecortó los íconos y miniaturas del original y borró el texto en inglés de los banners. Reconstruyó la animación completa en código con los textos en español, cambió el modelo por Seedance 2.5 y comparó su versión contra el original, cuadro por cuadro, hasta que los tiempos coincidieron.
07 · Correcciones

Corrige hablando

Como el video es código, cualquier cambio tarda segundos. Dile lo que ves como se lo dirías a un editor. Mientras más concreto ("la segunda escena", "el texto de arriba"), mejor.

Qué quieres cambiarCómo pedirlo
Ritmo"Todo va muy lento, hazlo más rápido." · "Que los cortes caigan exacto en el ritmo de la música." · "Deja el logo más tiempo en pantalla."
Texto"Cambia 'NO EXISTE' por 'SÍ EXISTE'." · "El título está muy chico, hazlo más grande." · "Que el texto no tape la cara."
Movimiento"Que el título caiga y rebote." · "Agrega una cámara que se mueva en 3D entre las fotos." · "Que los videos se vean como que vuelan hacia la cámara."
Color"Cambia el verde por mi azul #2F7BFF." · "El fondo está muy oscuro."
Material"Cambia el tercer video por el de la playa." · "Usa solo del segundo 4 al 7 de ese clip."
Sonido"Quita la música." · "Sube mi voz." · "Que la música baje cuando hablo."
Redes"Que nada importante quede abajo, donde aparece la interfaz de Reels."

También puedes editar a mano: el editor de HyperFrames

Cuando Claude te abre la vista previa, no es solo para ver: Studio es un editor. Todo lo que cambias ahí se guarda en el proyecto y sale en el video final. Úsalo para retoques chiquitos; para cambios grandes, pídeselo a Claude. Así se ve con el video de NASA abierto:

El editor de HyperFrames con el video de NASA abierto: escenas a la izquierda, vista previa al centro, inspector a la derecha y línea de tiempo abajo123456

Para abrirlo, pídele a Claude: "Abre la vista previa de HyperFrames y dame el link." Se abre en tu navegador.

¿Y Remotion?

También tiene su editor, Remotion Studio: ves el video, recorres la línea de tiempo y exportas con el botón Render. Pero casi todos los cambios viven en el código, así que con Remotion conviene más pedir los cambios por el chat.

Remotion Studio con el carrusel 3D de la clase abierto
09 · Otro ejemplo real

Un video con todas tus cosas

Promo de Baúl Metalero, un canal de historias de rock automatizado con IA. Todo lo que ves es material propio: episodios reales del canal, su logo, su música, su voz y sus números. Hecho con HyperFrames.

Videos

4 episodios del canal, recortados y dentro de celulares animados.

Marca

El logo y las tipografías del canal.

Sonido

La música propia del canal y la voz con la que narra sus videos.

Datos

Vistas y seguidores reales que cuentan hacia arriba.

Así se pidió

TúRevisa el proyecto de Baúl Metalero. Toma 3 o 4 videos ya hechos y haz un video de 40 a 50 segundos con HyperFrames, con muchas animaciones, que explique que todo el canal está automatizado, desde los guiones hasta la publicación. Pon los números del canal: vistas y seguidores.
ClaudeBuscó los episodios con más vistas, la música del canal, el logo y las tipografías, y revisó las métricas reales. Escribió el guion de la voz y armó 6 escenas: el gancho, cómo se hace cada video, cómo se publica, los resultados con contadores, el sitio web en una tarjeta 3D y el cierre. Cada animación entra justo cuando la voz dice esa palabra.
TúAhora haz una versión en español, textos y audio en español.
ClaudeTradujo los textos, generó la voz en español con ElevenLabs y volvió a amarrar cada animación a las palabras de la nueva voz.
TúQuiero que las animaciones sean más espectaculares y fluidas, con cámaras en 3D. ¿Qué me recomiendas?
ClaudePropuso movimientos de cámara en 3D y transiciones más fluidas entre escenas, y los aplicó cuando le dijimos que sí.
TúMe gusta la velocidad y el estilo. Ahora quiero el fondo totalmente negro.
TúActualiza los datos de vistas y seguidores para el video.
ClaudeVolvió a sacar las métricas del canal, cambió los números, ajustó la voz a las cifras nuevas y exportó la versión final.
💡

Fíjate en que nunca le explicamos cómo animar. Le dijimos qué queríamos contar, con qué material y qué sensación buscábamos ("más espectacular", "fondo negro"). El resto lo decidió Claude y nosotros solo corregimos viendo el resultado.

10 · HyperFrames vs Remotion, probado

¿Cuál es cuál?

Le dimos a Claude el mismo prompt y el mismo material (logo, 3 episodios, música y datos del Baúl Metalero), una vez con HyperFrames y otra con Remotion. Sin que nadie tocara el código.

HyperFrames · 7.5 min hasta la vista previa · render de 15 s en 34 s
Remotion · 6 min hasta la vista previa · render de 15 s en 2 min
🎯

Para un video suelto, da igual. Los dos rebotan, mueven la cámara en 3D, cuentan números y respetan tu marca. Elige por comodidad, no por resultado.

Donde sí se nota: videos en serie

Remotion puede tomar una sola plantilla y una lista de datos y sacar muchos videos con un comando. Cada uno toma su duración y su formato de sus datos. Aquí la lista tenía los 3 episodios: cada video dura lo que dura su clip, y con cambiar una palabra ("cuadrado") sale en otro formato. Las barras naranjas y el logo reaccionan a la música.

Hanneman · 15.6 s
Paranoid · 17.6 s
Smoke on the Water · 11.6 s
Paranoid cuadrado · 1080×1080
Con Remotion, crea una plantilla vertical para mi canal usando marca.md, mi logo, mis fuentes y mi música. Haz un archivo episodios.json con una fila por cada clip de videos/ (título, banda, fecha, video y formato). Que cada video dure lo que dura su clip más una portada y un cierre, y que "formato: cuadrado" lo haga 1080×1080. Agrega barras que reaccionen a la música. Al final, renderiza todos los videos con un solo comando.
🧭

La regla: empieza con HyperFrames. Pásate a Remotion cuando quieras fabricar videos en serie: uno por producto, por episodio, por cliente, con datos distintos en cada uno.

11 · Anatomía de un video

¿Cómo le pido algo así?

Este reel de 65 segundos lo hicimos con HyperFrames y Remotion juntos, a partir de un video que vimos en internet: se lo pasamos a Claude como referencia. Empezó como uno de 30 segundos; lo alargamos con más efectos de la galería y música nueva, y las siete escenas nuevas las hicieron tres agentes de Claude trabajando en paralelo. Abajo está cada momento con el nombre del efecto y la frase para pedirlo.

15 escenas

Una cada 2–6 segundos, todas al ritmo de la música (108 golpes por minuto).

2 motores

5 piezas de Remotion dentro de un video armado en HyperFrames.

Un recurso de marca

Cada frase termina con una palabra en itálica verde: la palabra acento.

≈ $0.70 USD

Todo es animación en código; lo único generado con IA fue la música.

MomentoQué vesCómo se llamaMotorPídelo así
0 – 2.5 sTres tarjetas de vidrio con los nombres vuelan desde el fondo, una por golpe, y sueltan chispas al llegarVideos que vuelan · Líneas de velocidad · ChispasHyperFrames“Que tres tarjetas de vidrio con los nombres Claude, HyperFrames y Remotion vengan volando, una por golpe de música, con líneas de velocidad y chispas cuando llegan.”
2.5 – 4.7 sLas tarjetas en fila y “Juntos hacen esto.”; atrás, una forma cambia de círculo a rombo al ritmoPalabra acento · Formas que se transformanHyperFrames“Las tarjetas en fila unidas con “+”, arriba “Juntos hacen esto”, y atrás una forma que cambie de círculo a rombo en cada golpe.”
4.7 – 9.1 sUn panel de chat entra girando; se escribe el prompt, salen los archivos y un cursor da clicMáquina de escribir · Cursor y clicHyperFrames“Un panel de chat de vidrio que entre girando; que se escriba el prompt, aparezcan mis archivos y un cursor dé clic en enviar.”
9.1 – 13.6 sUn piso 3D de pantallas con los trabajos que se encienden; polvo flotando encimaMuro de pantallas · Polvo flotandoRemotion + HyperFrames“Con Remotion, un piso 3D de pantallas con mis clips que se enciendan al pasar una luz verde. Encima, polvo flotando y “Cada trabajo, a la vista”.”
13.6 – 18 sLa transcripción real de una voz sube en un panel inclinado; tres frases se resaltan y saltan como píldorasResaltador · PíldorasHyperFrames“Transcribe mi voz y ponla en un panel de vidrio inclinado que vaya subiendo; que se resalten mis tres mejores frases y salten como píldoras.”
18 – 22.5 sLa onda real de la música avanza y en cada golpe salta una miniaturaBarras de música · Montaje al ritmo · ReboteRemotion + HyperFrames“Con Remotion, la forma de onda de mi canción con una marca en cada golpe y una miniatura que salte en cada marca: “Corta al ritmo”.”
22.5 – 26.9 sUn cuadro del video se parte en láminas de vidrio que se separan en 3D entre partículas; se juntan y aparece “HECHO CON CLAUDE” en tres capasImagen en capas de vidrio · Vórtice · Texto con profundidadHyperFrames“Que un cuadro de mi video se parta en capas de vidrio que se separen en 3D mientras la cámara gira, con partículas alrededor; luego que se junten y aparezca el título en capas.”
26.9 – 31.4 sUna librería de sonidos: se busca “impacto”, suena y se arrastra a la línea de tiempo justo en un golpeInterfaz de chat · Cursor y clic · Anillo 3DHyperFrames“Una librería de sonidos donde el cursor busque “impacto”, lo reproduzca y lo arrastre a la línea de tiempo en un golpe. Atrás, un anillo 3D tenue.”
31.4 – 35.8 sTres pistas (voz, música, efectos); la curva del volumen se dibuja sola y baja cuando habla la vozCurva que se dibuja · Barras de músicaHyperFrames“Un mezclador con voz, música y efectos; que la curva de volumen de la música se dibuje sola y baje cuando habla la voz, y al final diga “Masterizado”.”
35.8 – 40.2 sEl clip en 16:9; se dibujan los recortes 9:16 y 1:1 y cada uno vuela a su marcoReencuadre en formatosRemotion + HyperFrames“Con Remotion, el mismo clip en 16:9, 1:1 y 9:16; con HyperFrames, que cada recorte vuele a su marco: reproductor, publicación y celular.”
40.2 – 42.5 sOcho cortes rapidísimos, uno cada medio golpe, con destello verde y glitchMontaje al ritmo · Destello de corte · GlitchHyperFrames“Ocho cortes de mis clips, uno cada medio golpe, con un destello verde y un glitch de dos cuadros en cada corte.”
42.5 – 46.9 sCarrusel cilíndrico de videos con luces desenfocadas; “Promos. Series. Reels.” y “Con tus cosas.”Carrusel 3D · Bokeh · Golpe de textoRemotion + HyperFrames“Con Remotion, un carrusel cilíndrico con mis videos; encima bokeh verde y “Promos. Series. Reels.” una palabra por golpe.”
46.9 – 51.4 sLa cámara dentro de una pared curva de pantallas; un contador sube a “12 trabajos”, luego “Un agente” y “Horas, no semanas.”Muro de pantallas · ContadorRemotion + HyperFrames“Con Remotion, la cámara dentro de un cilindro de pantallas con mis clips. Encima, un contador que suba a 12 trabajos.”
51.4 – 58 sVuelve el chat: se escribe “Y ahora… ¿este video?”, se renderiza a 100 % y aparece el archivoMáquina de escribir · Barra de carga · Cursor y clicHyperFrames“Que regrese el panel de chat, se escriba “¿y este video?”, una barra de render llegue a 100 % y aparezca el archivo del video.”
58 – 65 sCierre: “Hecho con Claude.”, el logo cae con un golpe, onda y confetiGolpe de logo · Ondas expansivas · Confeti · Palabra acentoHyperFrames“Un cierre sobre negro con “Hecho con Claude”; que mi logo caiga con un golpe, una onda y un poco de confeti de mis colores.”
🎚️

Lo que está en todo el video: Montaje al ritmo (los cambios de escena caen en los golpes de la música), Destello de corte (un flash verde en cada cambio), Fondo vivo (brillo verde que respira) y una Cámara 3D que nunca se queda quieta.

El video completo en un solo mensaje

Si ya tienes tu carpeta con clips, logo y música, puedes pedirlo todo de una vez y luego corregir escena por escena. Para uno así de largo, pide que repartan las escenas entre varios agentes:

Haz un video horizontal (16:9) de 65 segundos al ritmo de la canción de musica/, con mis clips de videos/ y mi logo de logo/. Usa HyperFrames para armarlo y Remotion para las piezas en 3D. Estilo: fondo negro con brillo de mi color, títulos en sans y la última palabra de cada frase en itálica de mi color. Escenas:
1. Tarjetas que vuelan con los nombres de mis herramientas, con líneas de velocidad y chispas.
2. Las tarjetas en fila y "Juntos hacen esto", con una forma que se transforma atrás.
3. Un panel de chat donde se escribe un prompt, aparecen mis archivos y un cursor da clic.
4. Muro de pantallas en 3D con mis clips (Remotion) y polvo flotando: "Cada trabajo, a la vista".
5. La transcripción de mi voz en un panel inclinado, con frases resaltadas que saltan como píldoras.
6. La onda de la música con una marca en cada golpe (Remotion): "Corta al ritmo".
7. Un cuadro de mi video partido en capas de vidrio que se separan en 3D con partículas.
8. Una librería de sonidos donde se busca y se arrastra un efecto a la línea de tiempo.
9. Un mezclador donde la música baja cuando habla la voz.
10. El mismo clip en 16:9, 1:1 y 9:16 volando a sus marcos: "Cada formato".
11. Ocho cortes rapidísimos con destello y glitch.
12. Carrusel 3D con mis videos y bokeh (Remotion).
13. La cámara dentro de una pared curva de pantallas con un contador (Remotion).
14. El chat otra vez, renderizando este mismo video.
15. Cierre con golpe de logo, onda y confeti.
Que cada cambio de escena caiga en un golpe de la música. Reparte las escenas nuevas entre varios agentes en paralelo y antes de animar muéstrame el plan.
12 · Ejemplo: tu presentación en 60 s

Un showreel con tu voz

Presentación personal de Alfredo (@_ialfredo_) en 60 segundos: quién es, sus 12 proyectos y cómo lo hizo Opus 5.5. Todo en HyperFrames, con voz generada con IA, música y efectos de sonido. Existe también en inglés.

Qué necesitas tener

  • Un clip o imagen por proyecto, con su nombre y una frase de qué es (aquí fueron 12).
  • Tu identidad: nombre, @, a qué te dedicas en 3 palabras, colores y tipografías.
  • Datos reales para el cierre (cuántos proyectos, cuántos fotogramas tiene el video…).
  • Una foto para las partículas (tu personaje, tu cara o tu logo) y otra en la que se transforme.
  • La voz: la frase que sí o sí debe decir y qué voz usar. Generar la voz cuesta créditos: aquí fue una sola toma de ElevenLabs.
  • Música: tuya, o pídele que la genere en tu computadora sin costo (así se hizo aquí).
  • Opcional: un video de referencia del estilo que te gusta.
1,800

fotogramas, todos escritos en código

4 pedidos

clave para llegar a esta versión

Así se pidió

Tú(con el link de un video de YouTube sobre motion graphics con Opus 5.5) ¿Puedes ver este video y hacer una presentación en video de 40 segundos sobre mí, mis proyectos y la potencia que tiene Opus 5.5 para hacer motion graphics?
ClaudeSacó la idea central del video de referencia, confirmó formato (vertical para Instagram), identidad y que llevara todos los proyectos, y armó 5 escenas en HyperFrames.
TúQuiero hacerlo más grande, que dure 60 segundos, que le metas más imágenes y videos de lo que he hecho, y que utilices más rebotes, más resorte en las imágenes, con transformación. A lo mejor utilizar en algún momento partículas para formar cosas, que sea más espectacular.
ClaudeAgregó el muro 3D de miniaturas, subió a 12 proyectos con cuatro entradas de resorte distintas y creó la escena de 2,116 partículas que pasan de la foto del chango a la estatua y a “OPUS 5.5”.
TúGenera la voz. En algún momento, la voz tiene que decir: “E incluso esta voz fue generada con IA dentro de la conversación.”
ClaudeEscribió el guion, generó la voz en una sola toma, la partió en frases para que cupiera en 60 s y amarró las animaciones a lo que dice: los nodos se encienden cuando los nombra y la música baja cuando habla.
TúAhora quiero que lo traduzcas al inglés: todos los textos y el audio también.

Escena por escena

MomentoQué vesCómo se llamaPídelo así
0 – 6 sSe escribe un prompt, clic en generar; “NADIE LO ANIMÓ.” sube desde abajo y “lo escribió CLAUDE OPUS 5.5” se descifra con código de fondoMáquina de escribir · Cursor y clic · Decodificar · Palabra fantasma“Que empiece con una caja de prompt donde se escribe la petición, clic en generar, y luego “Nadie lo animó” y “lo escribió Claude Opus 5.5” descifrándose.”
6 – 10 s“Hola, soy ALFREDO” se descifra; DISEÑO · VIDEO · IA entran con rebote elástico; aparece el @Decodificar · Rebote · Píldoras“Que mi nombre aparezca descifrándose y luego tres palabras de lo que hago entren con rebote elástico.”
10 – 14 sMuro 3D de 25 miniaturas que llegan rebotando, hacen una ola y la cámara entra a la primeraMuro de pantallas · Rebote · Cámara 3D“Un muro en 3D con miniaturas de todos mis trabajos que lleguen rebotando, hagan una ola y la cámara entre al primero.”
14 – 38 s12 proyectos, uno cada 2 s, con contador 01/12; cada uno entra distinto (barrido, giro 3D, pop elástico, lanzamiento); hay pantalla dividida, cambio de lente y checklistTarjetas que se voltean · Barrido · Pantalla dividida · Contador · Rebote“Muestra mis 12 proyectos, 2 segundos cada uno, con su nombre y una frase; que cada tarjeta entre con un resorte distinto y un contador 01/12.”
38 – 43 s2,116 partículas: la foto del chango se deshace, forma la estatua de Estoicismo, luego escribe “OPUS 5.5” y explota hacia adentroImagen que se desintegra · Partículas que forman texto · Morph de partículas“Que mi foto se convierta en partículas, formen otra imagen y luego escriban “Opus 5.5”, y al final implosionen.”
43 – 55 sOpus 5.5 al centro y nodos (código, imagen, video, voz, música, 3D) que se encienden cuando la voz los nombra; luego “¿Y este video?” con contadoresDiagrama de nodos · Contador · Ondas expansivas“Un diagrama con Opus 5.5 al centro y mis herramientas alrededor que se enciendan cuando la voz las nombre; luego los números del video contando.”
55 – 60 s“Tu idea, HECHA MOTION.” con cursor, sticker “¿HACEMOS LA TUYA?” y el @Palabra acento · Máquina de escribir · Sticker que se pega“Cierre con “Tu idea, hecha motion”, un sticker amarillo que pregunte “¿Hacemos la tuya?” y mi @.”
🎚️

Lo que está en todo el video: un HUD (barra de interfaz con contador real de fotogramas y capítulos), una Palabra fantasma gigante al fondo de cada escena, Fondo vivo con grano, y la voz con IA con la música que baja cuando habla.

13 · Caso real

Todo junto: el reel del influencer

Este reel de 75 segundos para una campaña de Higgsfield es la muestra de todo lo de la clase en un solo video. Roco grabó su cámara y cortó sus tomas en su editor; todo lo demás lo hizo Claude con HyperFrames: el panel de arriba con las pantallas y sus zooms, el personaje virtual hablando, el recuadro con la cabeza saliendo, los subtítulos, los glitches y el cierre. Ni CapCut ni Premiere para efectos ni subtítulos. Hubo diez versiones en dos días; aquí van tres.

Versión 1 · 6 de octubrePrimera entrega: Roco en un recuadro con borde y brillo, subtítulos en bloques, gancho estilo Black Mirror y música generada.
Versión 5 · 7 de octubre, mañanaDespués de la primera ronda de Roco: cámara de lado a lado con la cabeza saliendo, zooms que siguen al cursor, catálogo tachado, tríptico de resultados.
Versión 10 · 7 de octubre, noche · la finalEl influencer virtual abre hablando y Roco entra con un glitch; la instalación del plugin se ve paso a paso. Sin música: la pone Roco al publicar.

Todo esto se usó para armar el video

Así se veía la carpeta del proyecto: el video y la voz de Roco, el personaje virtual con sus hojas de personaje, las grabaciones de pantalla, las capturas y hasta el video de WhatsApp con las correcciones. Claude trabajó con lo que había aquí.

reel-influencer17 archivos
MP4
1006.mp4El video de Roco · 75 s
M4A
roco-voz.m4aSu voz, nivelada
MP4
personaje-intro.mp4Influencer virtual hablando
PNG
sheet-abrigo.pngCharacter sheet
PNG
sheet-blanco.pngCharacter sheet
PNG
sheet-verde.pngCharacter sheet
JPG
cuarto-con-roco.jpgEl cuarto, para igualar el color
MP4
baile.mp4El influencer bailando · 15 s
MP4
fiesta.mp4Resultado: la fiesta · 9 s
MP4
telefono-chatgpt.mp4Grabación de ChatGPT · 12 s
MP4
instalar-plugin.mp4Instalar el plugin · 4 s
PNG
higgsfield-influencer.pngCaptura de Higgsfield
PNG
genjutsu.pngCaptura de Genjutsu
PNG
launchpoint.pngCaptura de Launchpoint
MP4
correcciones-roco.mp4Correcciones por WhatsApp · 3:54
SVG
higgsfield-logo.svgLogo
JSON
transcripcion.jsonLa voz, palabra por palabra

La historia del chat, resumida

TúCrea un reel con el video de Roco, con el formato de sus reels de colaboración que ya tiene en Instagram. Su video ya está terminado en la carpeta Terminados CapCut y no se modifica. Usa los archivos que están en la carpeta del proyecto para hacer los videos de soporte. Edita todo el video con HyperFrames, incluidas las animaciones, y tú decide cómo animar cada parte, siguiendo lo que va diciendo Roco y el estilo de las animaciones que ya hemos hecho.
ClaudeTranscribió la voz de Roco palabra por palabra, alineó los cinco paneles a lo que va diciendo, recortó a Roco sin fondo para que la cabeza sobresalga y armó la versión 1 con subtítulos en bloques de tres o cuatro palabras.
Roco, en un video de WhatsAppEmpieza como un cuadro sin imagen. Que el video abarque todo el cuadro de abajo, sin bordes, y que nada más se salga mi cabeza. Que comience hablando yo y luego, con Genjutsu, me cambie por el influencer. Y agrégale zooms al proceso, para que no esté fijo.
ClaudeQuitó el fundido de entrada, puso la cámara de lado a lado abajo con una línea verde fina, hizo que los zooms de las pantallas sigan al cursor, ejemplificó el catálogo con seis influencers que se tachan y agregó el tríptico de resultados y el cierre centrado.
TúRoco no sale bailando en ningún lado. Y no recortes al personaje sobre Roco: usa el video del personaje con el color igualado.
ClaudeDescartó la versión con baile. Igualó el color del video del personaje al cuarto de Roco con una curva sacada del fondo real y lo puso en el bloque de cámara, con un glitch de negativo al entrar y al salir.
Roco, segunda rondaQue todo antes de "Primero vas a entrar" sea el personaje. El título de Black Mirror abajo y sin el signo de interrogación, que me tapa la cara. Y que se vea el "+" cuando instalo el plugin.
ClaudePuso al personaje a pantalla completa los primeros dos segundos y luego en el bloque de cámara, movió el título al tercio inferior y volvió a animar la instalación del plugin con siete cortes a velocidad normal y un zoom suave. Luego renderizó la versión 10: 75 segundos, 1080×1920, con la voz nivelada y recortando los primeros cuadros para que arranque justo con la primera palabra.

Lo que viene de la clase

  • Voz amarrada a la animación: la transcripción marca cuándo entra cada panel.
  • Recuadro con la cabeza saliendo: recorte sin fondo del propio video de Roco.
  • Zoom que sigue al cursor en las pantallas del teléfono.
  • Subtítulos en bloques, cuadrícula que se tacha, tríptico, pantalla dividida.
  • Glitch para cambiar de persona y golpe de logo en el cierre.
  • Personaje virtual (video generado) con el color igualado al cuarto real.
🔁

Fíjate en la conversación: aquí fueron diez versiones en dos días, cada una pedida con un video de WhatsApp o un mensaje corto. Tú ves, dices qué cambiar, Claude lo cambia. No hay que saber editar: hay que saber ver.

14 · Fuera del brand kit

El mismo método, otra marca

Para probar que esto sirve con cualquier marca, hicimos un homenaje a Artemis II, la misión que llevó personas de vuelta a la Luna. Todo es material real de NASA: fotos, la voz de la transmisión del despegue y el ruido real del cohete. Nada está hecho con IA. Hecho con HyperFrames en una tarde.

Datos

Cada número se comprobó en nasa.gov antes de animarlo. Tres datos de las noticias estaban mal.

Fotos

11 fotos de images.nasa.gov, aprobadas una por una con nombre, fuente y tamaño antes de descargarlas.

Sonido

La cuenta regresiva real, sacada de 6 horas de transmisión, y el rugido del micrófono de la plataforma.

3D

La Tierra en puntos con la ruta en ocho y la Luna en relieve, hecha con la foto real de la tripulación.

Así se pidió

TúLee el brief. Vamos a producir ese video con HyperFrames. Primero verifica los datos en la página oficial de Artemis II en nasa.gov y dime si alguno cambia. Luego busca en images.nasa.gov las fotos y el audio que necesita cada escena y dame la lista para que yo apruebe la descarga.
ClaudeComparó cada dato con nasa.gov y encontró tres que cambiaban: la hora del despegue (6:35, no 6:30), la velocidad de reentrada y los "54 años", que en realidad son 53 (NASA dice "más de medio siglo"). Luego entregó la lista de archivos con su tamaño.
TúUsa el logo de NASA, es con fines educativos. Dale con el video.
ClaudeDescargó el material, transcribió la transmisión para encontrar el "10, 9, 8…" exacto y armó 8 escenas. Cada número de la cuenta regresiva golpea con la voz real y el reloj de misión llega a 9 días, 1 hora y 32 minutos justo en el amerizaje.
TúLa trayectoria que forma un ocho se ve un poco irregular. ¿Se lo puedes checar?
ClaudeLa rehízo con curvas simétricas: la vuelta es el reflejo exacto de la ida.

Efectos de la galería que usa

Cuenta regresivaGlitchKen BurnsLíneas de velocidadGlobo con conexionesCurva que se dibujaTarjetas que se volteanContadorViaje entre estrellasImagen en relieve 3DPalabra acentoImagen en capas de vidrioDestello anamórficoPartículas que forman texto

💡

Las fotos, el video y el audio de NASA se pueden usar con fines educativos si das crédito ("Imágenes: NASA"). Su logo sí está protegido: aquí aparece en un homenaje no oficial y educativo. Para algo comercial tendrías que pedirle permiso a NASA. Antes de usar el material de cualquier marca o institución, revisa sus reglas.

15 · Galería de movimientos

Pídelos por su nombre

Estos son movimientos que Claude sabe hacer con HyperFrames y con Remotion. Cada tarjeta se está moviendo de verdad. Copia la frase de "Pídelo así" y ajústala a tu video. El skill motion-club reconoce todos estos nombres.

Míralo con audio: todo cae en el golpe

La galería no tiene sonido, así que aquí va una demo con música: un thrash del canal Baúl Metalero. Claude detectó el ritmo (120 BPM, 62 golpes en 32 segundos) y amarró a esos golpes cada corte, cada palabra y el golpe del logo. La regla de abajo enseña los golpes y el cabezal pasando por ellos. Pídelo así: "Usa la canción de musica/, detecta el ritmo y que cada corte, cada palabra y el logo caigan en el golpe."

Partículas y 3D

Miles de puntos que forman figuras, logos e imágenes en 3D. En HyperFrames se hacen con su adaptador de Three.js; en Remotion, con @remotion/three. Puedes pedirlos con tu propia foto o tu logo.

Esfera de partículasAmbos · con Three.js"Partículas sueltas que se juntan, forman una esfera que gira y se vuelven a dispersar."
Partículas que forman tu logoAmbos · con Three.js"Que miles de partículas vuelen y formen mi logo, y luego se dispersen."
Partículas que forman textoAmbos · con Three.js"Que las partículas se junten y escriban “CLAUDE”."
Imagen que se divide en píxelesAmbos · con Three.js"Que mi foto se rompa en cuadritos que salen volando en 3D y se vuelvan a armar."
Imagen en relieve 3DAmbos · con Three.js"Que mi foto se convierta en puntos con profundidad y la cámara gire alrededor."
Imagen que se desintegraAmbos · con Three.js"Que mi foto se deshaga en partículas con el viento y luego regrese."
Morph de partículasAmbos · con Three.js"Que una nube de partículas cambie de esfera a cubo y a dona."
Galaxia de partículasAmbos · con Three.js"Una galaxia en espiral de partículas que gira lento."
Mar de puntosAmbos · con Three.js"Un mar de puntos en 3D que ondula como olas."
Túnel de partículasAmbos · con Three.js"Que la cámara viaje por un túnel de partículas."
VórticeAmbos · con Three.js"Partículas que giran en remolino hacia el centro."
Cubo de bloquesAmbos · con Three.js"Un cubo hecho de bloquecitos que gira, explota y se vuelve a armar."

Objetos 3D

Objetos sólidos con luz y sombra, no solo puntos. En HyperFrames se hacen con su adaptador de Three.js; en Remotion, con @remotion/three (React Three Fiber). Puedes pedirlos con tu logo, tus iniciales o tu producto.

Letras 3DAmbos · con Three.js"Mis iniciales en letras 3D de bloques, que se arman solas y giran despacio."
Low poly con luzAmbos · con Three.js"Una roca low poly verde que gira, con una luz dura desde arriba a la izquierda."
Anillo 3DAmbos · con Three.js"Un anillo 3D que gira detrás del título, con luz y sombra de verdad."
Nudo 3DAmbos · con Three.js"Un nudo 3D que gira lento, como fondo abstracto para la intro."
Caja de productoAmbos · con Three.js"Mi caja de producto en 3D, que gira para enseñar todos sus lados."
Moneda que giraAmbos · con Three.js"Una moneda con mi logo que gira sobre sí misma y brilla al pasar la luz."

Texto

REBOTE
ReboteAmbos"Que el título caiga letra por letra y rebote al tocar el piso."
Tuidea,animada
CascadaAmbos"Que las palabras entren una tras otra desde abajo, rápido."
Haz un video de 15 s
Máquina de escribirAmbos"Que el texto se escriba letra por letra con cursor."
MOTION
DecodificarAmbos"Que la palabra aparezca descifrándose con letras al azar."
NOSEDETIENE
Golpe de textoAmbos"Frases cortas que golpean una por golpe de música."
Todo con IA
ResaltadorAmbos"Que un marcador verde subraye la palabra clave."
Cada frame, diseñado.
Palabra acentoAmbos"Título en sans y la última palabra en itálica de otro color."
3D3D3D3D3D3D
Texto con profundidadAmbos"Título con capas en profundidad que gira un poco."
OLEAJE
Onda de letrasAmbos"Que las letras del título se muevan como una ola."
ARMADO
Explosión de letrasAmbos"Que el título se arme desde letras que vienen de todos lados."
CONTORNO
Contorno a rellenoAmbos"Que el título aparezca solo con contorno y luego se rellene."
Rápido.
Fácil.Barato.Tuyo.Rápido.
Ticker verticalAmbos"Que una palabra vaya cambiando hacia arriba, como ruleta."
HECHO CON CLAUDE · MOTION GRAPHICS ·
Texto en círculoAmbos"Un sello circular con texto girando alrededor de mi logo."
GLITCH
GlitchAmbos"Que la palabra clave haga glitch con separación de color, una sola vez."
Asíescomolodicesyasíapareceenpantalla
Subtítulos karaokeAmbos"Subtítulos palabra por palabra que se iluminan cuando la digo."
Caro y lento fácil
TachadoAmbos"Que “y lento” se tache y aparezca “fácil” en verde."
PREMIUM
Brillo que recorreAmbos"Que un brillo recorra el título de izquierda a derecha."
ABIERTO
Neón que parpadeaAmbos"Un letrero de neón que parpadea al encenderse."
Alfredo ArévaloMotion designer · Club de la IA
CintilloAmbos"Un cintillo con mi nombre y cargo que entre desde la izquierda."
HECHO CON CLAUDE · HYPERFRAMES · REMOTION · HECHO CON CLAUDE · HYPERFRAMES · REMOTION ·
MarquesinaAmbos"Una franja con texto que corre de lado a lado sin parar."

Cámara y 3D

Cámara 3DAmbos"Que la cámara vuele entre mis fotos como en un pasillo."
Carrusel 3DMejor en Remotion"Un carrusel cilíndrico con mis videos girando."
Muro de pantallasMejor en Remotion"Un piso en 3D lleno de miniaturas de mis trabajos."
Videos que vuelanAmbos"Que mis videos vengan volando desde el fondo hacia la cámara."
HOLA
IDEA
VIDEO
LISTO
Cubo 3DAmbos"Un cubo en 3D que gira y en cada cara trae una palabra."
Tarjetas que se volteanAmbos"Que las tarjetas se volteen una por una y muestren su contenido."
Parallax por capasAmbos"Que el fondo, las montañas y el frente se muevan a distinta velocidad."
Ken BurnsAmbos"Que la foto haga un zoom lento con un poco de paneo."
Imagen en capas de vidrioAmbos"Que mi foto se parta en láminas de vidrio que se separan en 3D mientras la cámara gira, y luego se vuelvan a juntar."

Ejemplo aparte: una foto separada en sus capas

La tarjeta de arriba parte la foto en láminas iguales. Aquí la foto se separa en sus capas reales: el fondo, la persona y el texto, que se abren en 3D y se vuelven a juntar. El recorte de Roco lo hizo HyperFrames en tu compu, sin créditos; el hueco del fondo se rellenó con desenfoque. Pídelo así: "Separa mi foto en capas (fondo, persona y texto) y que se abran en 3D mientras la cámara gira, y luego se vuelvan a juntar."

Partículas y fondos

ChispasAmbos"Que salgan chispas verdes cuando aparece el logo."
ConfetiAmbos"Una lluvia de confeti al final, con los colores de mi marca."
Polvo flotandoAmbos"Partículas de polvo flotando lento en el fondo."
Líneas de velocidadAmbos"Líneas de velocidad atrás de las tarjetas, como hiperespacio."
Fondo vivoAmbos"Fondo oscuro con retícula que se desliza, brillo que respira y grano."
BurbujasAmbos"Burbujas que suben despacio en el fondo."
AuroraAmbos"Un fondo de luces suaves de mis colores que se mueven lento."
BokehAmbos"Luces desenfocadas flotando, como fondo de cámara."
Lluvia de códigoAmbos"Una lluvia de código verde tipo Matrix de fondo."
Viaje entre estrellasAmbos"Que la cámara viaje entre estrellas hacia adelante."

Transiciones

A
B
Destello de corteAmbos"Un flash verde en cada corte."
A
B
BarridoAmbos"Que la siguiente escena entre con un barrido diagonal."
A
B
Zoom a travésAmbos"Que la cámara atraviese la escena y salga en la siguiente."
A
B
Máscara circularAmbos"Que la escena nueva se abra desde un círculo al centro."
A
PersianasAmbos"Que la escena nueva entre en franjas, como persiana."
A
B
EmpujeAmbos"Que la escena nueva empuje a la anterior hacia un lado."
A
MosaicoAmbos"Que la escena nueva aparezca en cuadritos al azar."

Datos

0vistas
ContadorAmbos"Que el número de vistas cuente hacia arriba y golpee al llegar."
BarrasAmbos"Una gráfica de barras que crezcan una por una con mis datos."
87%
Anillo de progresoAmbos"Un anillo que se llena hasta el 87 %."
Línea que se dibujaAmbos"Una gráfica de línea que se dibuja de izquierda a derecha."
DonaAmbos"Una gráfica de dona que se arma por partes con mis porcentajes."
2026
Marcador de aeropuertoAmbos"Que el número cambie con tarjetas que se voltean, como marcador de aeropuerto."
10segundos
Cuenta regresivaAmbos"Una cuenta regresiva de 10 a 0 que golpea en cada número."
Pin en el mapaAmbos"Un mapa de puntos donde cae un pin en mi ciudad."
Inscríbete
Botón que lateAmbos"Que el botón del final lata con un brillo para invitar al clic."

Informe financiero

Gráficas y tablas estilo informe: se dibujan con SVG a partir de tus cifras reales (datos.md). Las de aquí son de ejemplo; Claude nunca debe inventar números.

$820 k+24.5 %
Gráfica de áreaAmbos"Una gráfica de ingresos que se dibuja de izquierda a derecha, con el punto que avanza y el valor encima."
Velas de bolsaAmbos"Una gráfica de velas que se va armando vela por vela, verde cuando sube."
INGRESOS$0+12 %
MARGEN0 %+4 pts
CLIENTES0+31 %
Tablero de indicadoresAmbos"Tres tarjetas de indicadores con el número que cuenta, su mini gráfica y la variación."
ConceptoMontoVar.
Ingresos$1,250,000+12 %
Costos$610,000+4 %
Utilidad bruta$640,000+31 %
Gastos$280,000+2 %
Utilidad neta$360,000+48 %
Tabla que se llenaAmbos"La tabla del informe aparece renglón por renglón y la última fila, la utilidad, se resalta."

Mapas

Mapas de puntos, rutas, ciudades y pines. Las ciudades y las cifras salen de tu datos.md; el mapa se dibuja con SVG o canvas, sin servicios externos ni créditos.

Mapa de puntosAmbos"Un mapa del mundo en puntos que aparece de izquierda a derecha, y México se enciende en verde."
Ruta en el mapaAmbos"Una línea que viaja de la Ciudad de México a Madrid y luego a Buenos Aires, con un pin al llegar."
Zoom al paísAmbos"Del mapa del mundo, zoom a México: que se dibuje su contorno y se rellene de verde."
CDMX GUADALAJARA MONTERREY MÉRIDA
Ciudades que se enciendenAmbos"Un mapa de México donde se encienden las ciudades una por una, con su nombre."
Mapa de calorAmbos"Un mapa de calor sobre México: donde hay más clientes, más verde."
Mapa 3D con pinesAmbos"El mapa en perspectiva 3D, con pines que caen en cada sucursal."
Contorno con banderaAmbos"Que una línea dibuje el contorno de México y luego se rellene con la bandera."
Contorno con fotoAmbos"Que se dibuje el contorno del país y adentro aparezca mi foto, como si el mapa fuera una ventana."
Terreno con contorno fosforescenteAmbos · con tu foto aérea"Sobre la foto aérea de mi terreno, con un vuelo lento de dron, que una línea verde fosforescente recorra el lindero, ponga los metros de cada lado y la superficie."

Logo, música y cursor

Golpe de logoAmbos"Que mi logo caiga con golpe, ondas y temblor de cámara."
Trazo que se dibujaAmbos"Que el contorno de mi logo se dibuje y luego se rellene."
Barras de músicaMás fácil en Remotion"Barras que reaccionen a la música, en mi color."
Enviar
Cursor y clicAmbos"Un cursor que se mueve, da clic y el botón responde."

Interfaces y redes

Club de la IATu video está listo 🎬
NotificaciónAmbos"Que entre una notificación de celular que diga “Tu video está listo”."

¿Cuánto cuesta?

¡$199 hoy! 🎉

Chat que se escribeAmbos"Una conversación de chat donde aparece “escribiendo…” y luego la respuesta."
❤
Corazón que explotaAmbos"Que el corazón de me gusta explote con partículas al darle clic."
Renderizando…
100%
Barra de cargaAmbos"Una barra de progreso que se llena y dice 100 %."

Formas

Formas que se transformanAmbos"Que un círculo se transforme en cuadrado y luego en rombo."
Blob líquidoAmbos"Una forma líquida que se mueve como gota detrás del título."
Ondas expansivasAmbos"Ondas que salen del centro cuando aparece algo importante."
Curva que se dibujaAmbos"Una línea curva que se dibuja sola y guía la mirada."

Luz

NUEVO
Barrido de luzAmbos"Que pase un reflejo de luz sobre la tarjeta del producto."
Destello de lenteAmbos"Un destello de lente que cruce la pantalla al aparecer el logo."
ReflectoresAmbos"Reflectores de concierto que barren el escenario detrás del título."
Rayos de luzAmbos"Rayos de luz que salen desde atrás del logo y giran lento."
Rayos volumétricosAmbos"Rayos de luz volumétricos, tipo god rays, que salen de atrás del título entre polvo."
Fuga de luzAmbos"Una fuga de luz, como de cámara analógica, que cruce la foto en el cambio de escena."
ESTRENO
Destello anamórficoAmbos"Un destello anamórfico, la raya horizontal de cine, cuando aparece la palabra."
ContraluzAmbos"El producto a contraluz: una luz fuerte detrás que respira y le marca el borde."
Luz de ventanaAmbos"La luz de una ventana que se mueve despacio por la pared, con polvo flotando."

Composición

Esfera de puntosMejor en Remotion"Una esfera 3D de puntos que gira, como un planeta de datos."
Globo con conexionesMejor en Remotion"Un globo que gira con arcos de luz entre ciudades."
Fotos que caenAmbos"Que mis fotos caigan como polaroids sobre la mesa, una por una."
Pantalla divididaAmbos"Pantalla dividida: antes a la izquierda, después a la derecha."
Deslizar tarjetasAmbos"Que las tarjetas se deslicen hacia los lados como en una app de citas."
¡NUEVO!
Sticker que se pegaAmbos"Un sticker que se pega con rebote en la esquina."
🧩

¿Quieres más? El catálogo oficial de HyperFrames trae cientos de bloques listos (transiciones, gráficas, efectos). Dile a Claude el nombre del bloque o descríbelo con tus palabras.

16 · Tu skill de regalo

Un director de motion dentro de Claude

motion-club es un skill: un paquete de instrucciones que Claude carga solo cuando le pides un video. Las skills oficiales le enseñan a Claude a usar HyperFrames y Remotion; esta le enseña a dirigir, para que tú no tengas que saber cómo se anima.

1

Arma tu carpeta

Crea logo, fotos, videos, música, voz y referencias, más tus archivos de marca y datos.

2

Pregunta poco

Solo lo que falta: qué quieres decir, para qué red, cuánto dura y con qué material.

3

Movimientos con nombre

Rebote, cámara 3D, contador, golpe de logo, videos que vuelan, montaje al ritmo…

4

Revisa antes de exportar

Zona segura de Reels, contraste, datos reales y una segunda revisión con "ojos frescos".

Para qué te sirve

  • Te habla en español y solo te pregunta lo que falta (máximo 4 cosas, en un mensaje).
  • Te propone un plan escena por escena y espera tu visto bueno antes de animar.
  • Conoce los nombres de los efectos de la galería: los pides así y los hace.
  • Revisa con hojas de fotogramas y un "segundo par de ojos", y no exporta hasta que digas que sí.
  • No inventa números y no gasta créditos sin decirte cuánto cuesta.

¿Y si no lo tienes?

Claude igual hace el video con las skills oficiales de HyperFrames. La diferencia: te hace preguntas técnicas en inglés ("¿storyboard?", "¿flow?"), no te arma la carpeta, no conoce los nombres de la galería, puede elegir un motor que no hacía falta y no tiene la lista de errores que ya aprendimos. El video sale, pero más genérico y con más vueltas.

Instálalo

Descarga el archivo y pídele a Claude (pestaña Code) que lo instale:

⬇️

motion-club.zip

Skill de motion graphics · español

Instala el skill motion-club que está en mi carpeta de Descargas (motion-club.zip): descomprímelo en ~/.claude/skills/. Revisa también que tenga instaladas las skills de HyperFrames.

Luego abre una sesión nueva para que lo cargue.

Úsalo así

Empecemos un video para Instagram de mi negocio.
Hazme un promo de 15 segundos con lo que hay en la carpeta. Que el logo cierre con golpe y que los cortes caigan con la música.
En referencias/ dejé un video que me gusta. Hazme uno como ese con mi marca.
Quiero un video por cada producto de productos.json.

Frases que entiende

No son comandos con diagonal: son frases normales. Ponlas dentro de tu mensaje y el skill cambia de modo.

DileQué hace
“Empecemos un video”Revisa tu carpeta; si está vacía la arma (logo, fotos, videos, música, voz, referencias) y te dice qué meter en cada una.
“Ármalo directo” o “tú decide”No te pregunta: decide duración, formato y estilo, y te dice qué decidió.
“Hazlo como este video”Con un video en referencias/: mide su ritmo y sus cortes y lo recrea con tu material y tu marca, sin copiar imágenes, logos ni textos.
“Un video por cada… de esta lista”Videos en serie: una plantilla y una lista de datos (productos, episodios, clientes) dan muchos videos. Usa Remotion.
“Muéstrame el plan” o “sin storyboard”Plan corto escena por escena antes de animar, o se lo salta y arma directo.
Efectos por su nombre: “con golpe de logo”, “cámara 3D”, “contador”Usa el efecto de la galería con ese nombre.
“Más rápido”, “el título más grande”, “que pegue más fuerte”Correcciones habladas: cambia solo eso. Si la pides vaga (“que se vea más pro”), te da 2 opciones concretas.
“Usa HyperFrames” o “usa Remotion”Fuerza el motor. Si no dices nada, usa HyperFrames.
“Renderízalo” o “ya quedó”Exporta el MP4 y te da la ruta y la duración.
17 · Para seguir aprendiendo

Recursos oficiales

18 · Si algo falla

Lo que más pasa

"Claude no usa HyperFrames"

Abre una sesión nueva después de instalar y dile explícitamente "hazlo con HyperFrames".

No veo la vista previa

Pídele "abre la vista previa de HyperFrames y dame el link". Se abre en tu navegador.

Los subtítulos salen en inglés o mal escritos

Dile "transcribe en español". Si una palabra sale mal, dile cuál es la correcta; no tienes que corregir todo a mano.

La interfaz de Reels tapa el texto

Pide "respeta la zona segura de Reels": nada importante abajo ni en las orillas.

Mi tipografía no aparece

Mete el archivo de la fuente en la carpeta del proyecto y dile cuál es.

Algo se ve mal en un momento

Dile el segundo exacto: "en el segundo 6 el texto se encima con la foto". Claude saca ese fotograma y lo revisa.

🎬

¿Y After Effects? También se puede controlar con Claude, con conectores de la comunidad como After Effects MCP de Engine Room. Claude crea capas, keyframes, expresiones y cámaras dentro de tu proyecto, y quedan editables a mano. Conviene si ya eres motion designer y usas After Effects; si estás empezando, HyperFrames hace lo mismo sin pagar ni instalar After Effects.

19 · Cuánto cuesta

Ahora sí viene lo bueno

Mucha gente cree que esto es gratis "porque lo hace Claude". No: necesitas un plan de pago (Claude Code no viene en el plan gratuito) y cada video consume tokens. Aquí están los números reales de los videos de esta guía, lo que costarían por otras rutas, y cómo gastar menos.

Lo primero: el plan

PlanAl mesPara qué alcanza
Pro$20 USD
$17 anual
Hasta unos 4 videos al mes, trabajando en sesiones cortas. Una edición larga choca con el límite de 5 horas y toca esperar.
Max 5x$100 USDDe 5 a 10 videos al mes, con sesiones de varias horas.
Max 20x$200 USDMás de 10 videos al mes, o reels largos con muchas versiones. Es el plan con el que se hizo todo lo de esta guía.

Precios de claude.com al 8 de octubre de 2026. Todos los planes funcionan por ventanas de 5 horas y los de pago tienen además un tope semanal. Si lo tocas, esperas a que se reinicie o pagas créditos extra a precio de API.

Qué consume tokens

  • La conversación entera se vuelve a leer en cada respuesta. Eso es el 90 % del consumo. Una sesión de 800 respuestas re-lee cientos de millones de tokens; por eso una sesión larga "pesa" aunque cada mensaje sea corto.
  • Lo que Claude escribe (código, textos) es apenas el 10 %.
  • Mandar un video de WhatsApp con tus correcciones sale barato la primera vez: se convierte en unos 9 cuadros y una transcripción, unos 18 mil tokens (≈ 7 centavos de dólar a precio de API). Lo que lo encarece es que esos cuadros se quedan en la conversación y se re-leen en cada respuesta.
  • Imágenes y pantallazos cuestan unos 1,500 a 1,900 tokens cada uno; un PDF o un archivo enorme pegado en el chat, mucho más.
🗣️

Nota de Alfredo: este mes pude pagar la suscripción Max 20x y la exprimí: todo lo que ves en esta guía salió de ahí. Si tu nivel de producción es alto, te funciona y sale a cuenta. Si apenas empiezas, arranca con Pro y aprende a cambiar de modelo; es lo que más estira la cuota.

Cambia de modelo: lo que más estira tu plan

En los planes Pro y Max, Claude Code arranca con Opus 5.5, el modelo más capaz y el que más cuota gasta. No todo lo necesita. Esto es lo que hay hoy (verificado el 8 de octubre de 2026 en la documentación de Claude Code):

  • Opus para dirigir, Sonnet para ejecutar. Escribe /model sonnet para la parte mecánica (recortar clips, renombrar, renderizar, corregir un texto) y vuelve a /model opus para pensar la idea o resolver algo difícil. En la app de escritorio el modelo es el menú junto al botón de enviar y se puede cambiar a media conversación.
  • /model opusplan: un modo que usa Opus mientras planea y cambia solo a Sonnet cuando ejecuta. Es lo más cercano a "automático" que existe; cambia por tipo de trabajo, no por cuánta cuota llevas.
  • Haiku para lo pequeño. Si Claude manda tareas a subagentes, pídele que las corra en Haiku o Sonnet ("las tareas mecánicas hazlas con un subagente en Haiku"). También se fija en la configuración del agente con model: haiku.
  • Baja el esfuerzo para tareas simples: /effort medium o /effort low (en la app, Cmd + Shift + E). Menos tokens de razonamiento, menos cuota.
  • ¿Y los "mods"? Son plugins (pequeños programas en JavaScript) que cambian cómo se ve y se comporta Claude Code: paneles, barras, avisos, y también pueden intervenir en cada paso de la conversación. No traen de fábrica un "detecta qué tarea es fácil y mándala a Sonnet"; alguien que programe puede construirlo con ellos (sí exponen el porcentaje de cuota usada y el cambio de modelo por paso), pero hoy no es un botón.
  • Qué pasa al tocar el límite: Claude Code se detiene, te dice a qué hora se reinicia la ventana de 5 horas (o la semanal), se queda esperando en la misma sesión y sigue solo cuando se reinicia. La conversación no se cierra. Con /usage ves cuánto llevas.
  • Cambiar de modelo no te devuelve la cuota general (es compartida), pero sí te saca del tope específico de Opus si ese fue el que se acabó.
  • Si urge terminar, puedes activar uso extra a precio de API desde /usage-credits, con un tope mensual que tú fijas.

Lo que consumieron los videos de esta guía

Medido en las sesiones reales (modelo Opus 5.5) y traducido a lo que costarían si se pagaran por token a precio de API (entrada $4, caché $0.20, salida $20 por millón de tokens, 8 de octubre de 2026). Con el plan Max todo esto quedó dentro de la suscripción.

VideoRespuestas de ClaudeTokens re-leídosTokens escritosEquivalente en API
Promo de la clase, 16 s (4 mensajes + ajustes)≈11048 M130 k≈ $15 USD
Video emotivo de Día de Muertos, una sesión871426 M771 k≈ $124 USD
Serie de reels para redes, 3 sesiones1,605652 M1.7 M≈ $234 USD
Reel del influencer, 75 s, 10 versiones, 3 sesiones en 2 días (el caso más pesado)1,594762 M2.1 M≈ $276 USD
💡

Del 4 al 8 de octubre, todas las sesiones de todos los proyectos sumaron ≈ $1,365 USD a precio de API. La suscripción Max 20x cuesta $200 al mes. Ese es el beneficio: pagas una cuota fija y trabajas; el límite es el tiempo de uso, no la cartera.

¿Le pagas a alguien o lo haces tú?

Elige cuántos videos haces al mes y mira cuánto cuesta y cuántas horas te toca poner en cada caso. HyperFrames y Remotion son gratis: con Claude solo pagas tu plan. Precios en pesos con el dólar a $18.

¿Cuántos videos haces al mes?

Dinero al mes

Pesos mexicanos · lo que pagas en suscripciones o al editor

Horas tuyas al mes

Lo que te toca a ti · sin contar renders ni esperas

Con un editor solo pones el tiempo de explicarle y revisar. En After Effects, además del tiempo por video, aprenderlo toma de 40 a 80 horas, una sola vez.

SupuestoDe dónde sale
Editor: $4,500 MXN por video de un minuto con motion graphics en After EffectsLo que cobra un editor en México por un video así: entre $3,500 y $4,500. Los reels sencillos, sin animación propia, cuestan mucho menos ($600 a $1,200). Cada ronda extra de cambios suele cobrarse aparte.
After Effects: $23 USD al mes (≈ $415 MXN)Precio de Adobe por la app sola. La suite completa ronda $949 MXN al mes.
Plan de Claude según cuántos videos hacesHasta 4 al mes: Pro ($20 USD), si trabajas en sesiones cortas. De 5 a 10: Max 5x ($100 USD). Más de 10, o reels largos con muchas versiones: Max 20x ($200 USD), el que usamos para esta guía.
Horas por videoCon HyperFrames + Claude, ≈ 2.5 h (medido: el promo tomó 1 h; el reel del influencer, unas 5 h con 10 versiones). After Effects a mano ≈ 10 h ya sabiendo usarlo; con Claude armando el proyecto ≈ 4 h; con editor ≈ 1 h de explicar y revisar.
RutaQué pagasLo buenoLo malo
Le pagas a un editorPor video. Cada ronda de cambios extra cuesta y tarda días.Cero esfuerzo tuyo; ojo profesional.Caro si publicas seguido; dependes de su agenda; los cambios pequeños se vuelven lentos.
Lo haces tú en After Effects$23 USD al mes y tu tiempo: 40–80 h para aprender y después varias horas por video.Control total; herramienta estándar de la industria.La curva es larga; un reel con subtítulos, pantallas y zooms son horas de trabajo manual.
Tú + Claude + After EffectsDos suscripciones: tu plan de Claude y After Effects. Claude arma el proyecto por script (el conector es gratis).Te queda un archivo editable en After Effects; sirve si trabajas con editores.Más caro; hay que abrir el panel del conector a mano; menos efectos "listos" que en HyperFrames.
Tú + Claude + HyperFrames (la de esta clase)Solo tu plan de Claude, desde $20 USD. HyperFrames es gratis y Remotion también para personas y equipos pequeños.Rápido, todo por chat, iteras en minutos; tu logo, tu voz y tus videos entran tal cual.Necesitas plan de pago y una computadora con Node; los límites de uso te frenan si editas muchas horas seguidas; el ojo final lo pones tú.

Para gastar menos tokens

  • Una sesión por video. Cuando termines, abre una nueva. La conversación larga es lo que más cuesta.
  • Pide hojas de fotogramas para revisar, no renders completos cada vez.
  • Correcciones concretas: "el logo más chico y 1 segundo más tarde" gasta menos que diez mensajes de "no, así no".
  • Un video de WhatsApp está bien para dar feedback, pero mándalo una vez; no lo vuelvas a pegar.
  • No pegues archivos enormes (transcripciones completas, PDFs largos) si con un fragmento basta.
  • Ten tu carpeta ordenada (sección 04): Claude lee menos para entender qué es cada cosa.
20 · Repaso en 90 segundos

Toda la guía, en un video

Los 4 pasos, los prompts para copiar y 12 efectos de la galería con la frase para pedirlos. No tiene voz: pausa cuando quieras copiar algo. También lo hicimos con Claude y HyperFrames; los efectos son los mismos de la galería.

21 · Lo que sigue

Esta fue la ruta local. Lo que sigue: conecta Claude con tus programas

Todo lo de esta guía corre en tu computadora: no pagas nada aparte de tu plan de Claude, no necesitas After Effects y los resultados se ven profesionales. Es el camino para empezar y para producir en serio. En próximas clases del Club vamos a ir un paso más allá:

Conectores

Claude conectado a tus servicios (generadores de imagen, video y voz, tu Drive, tus redes) para usarlos desde el chat.

After Effects con Claude

El conector (MCP) que arma composiciones editables dentro de After Effects, y agentes como el AI Motion Designer de Higgsfield.

Plugins

Paquetes listos de skills, conectores y comandos que instalas en un clic y cambian cómo trabaja Claude.

Tu propio plugin

Cómo empaquetar tu forma de trabajar (como motion-club) para usarla siempre o compartirla con tu equipo.

📣

Las vamos a ir anunciando en el Club. Mientras tanto, con esta guía ya puedes hacer todo lo que viste en la clase.