Guía 01 Actualizada el 1 de octubre de 2026
Motion graphics con Claude.
Un video de tipografía rápida, de esos con una palabra por golpe, hecho solo con código. Sin editor de video y sin generar imágenes. Aquí están los pasos y el prompt completo.
Este video salió de pegar el prompt en una carpeta vacía, con una marca inventada (Taller Nube). No tiene sonido: la música se la pones tú.
Qué necesitas
- Claude Code: la pestaña Code de la app de escritorio de Claude, o Claude Code en la terminal. Viene con los planes de pago. El chat normal no sirve para esto, porque Claude tiene que ejecutar programas en tu computador.
- Node.js, ffmpeg y Google Chrome instalados. Si falta alguno, Claude te lo dice y te pide permiso antes de instalar.
- Ningún skill ni plugin. Tampoco créditos de generación de video: lo único que se usa es tu plan de Claude.
Los pasos
- Crea una carpeta vacía y ábrela en Claude Code.
- Completa los datos del prompt: marca, qué ofreces, colores y tempo. Usa solo datos que puedas sostener; Claude no debe inventar cifras ni clientes.
- Pega el prompt. Lo primero que recibes es una tabla con el guion por pulsos: qué palabra aparece en cada golpe. Cámbiale lo que quieras antes de aprobarlo.
- Claude construye la página, la fotografía cuadro a cuadro y arma el video. En las pruebas, cada exportación tardó cerca de un minuto.
- Revisa la hoja de contacto que te entrega: un cuadro por cada plano. Si algo no te gusta, pídele el cambio y vuelve a exportar.
- Ponle música en tu editor. Busca una pista con el mismo tempo que pediste y alinea su primer golpe con el inicio: los cortes ya caen en el ritmo.
Los datos que cambias
| Campo | Qué poner |
|---|---|
MARCA | El nombre, tal como se escribe. |
OFERTA | Qué ofreces, en una línea. |
AUDIENCIA | Para quién es. |
DATOS | Lo que sí puedes afirmar: plazos, cantidades, condiciones. Si algo tiene letra chica, escríbela aquí. |
ACCION | Una sola llamada a la acción, con tu dirección web. |
COLORES | Dos o tres, en hex. Por ejemplo #101014, #F4F1EA, #FF5A36. |
TIPOGRAFIA | El archivo de tu tipografía, o «no tengo; elige una de Google Fonts con licencia libre y descárgala del repositorio google/fonts de GitHub junto con su licencia». |
SEGUNDOS | Entre 12 y 15 funciona bien. |
BPM | El tempo de la canción que vas a usar. 120 es un buen punto de partida. |
El prompt
Quiero un video de motion graphics hecho solo con código, sin editor de video y sin generar imágenes con IA.
DATOS (usa solo esto; si falta algo importante, pregúntame antes de empezar y no inventes cifras, clientes ni testimonios):
MARCA: {{MARCA}}
QUÉ OFRECE: {{OFERTA}}
PARA QUIÉN: {{AUDIENCIA}}
DATOS CONFIRMADOS QUE PUEDES MOSTRAR: {{DATOS}}
LLAMADA A LA ACCIÓN: {{ACCION}}
COLORES (2 o 3, en hex): {{COLORES}}
TIPOGRAFÍA: {{TIPOGRAFIA}}
FORMATO: vertical 1080×1920, 30 fps, unos {{SEGUNDOS}} segundos, sin audio (la música la pongo yo)
TEMPO: {{BPM}} BPM
ESTILO: tipografía cinética rápida, como los videos de lanzamiento de las marcas de tecnología. Una idea por golpe, la palabra enorme al centro, cortes secos, fondos que se invierten entre mis colores, nada de adornos. Cada plano entra con una animación corta, y nunca dos iguales seguidas (escala, máscara, letras en cascada, deslizamiento, giro, contador que corre).
CÓMO HACERLO
1. Primero escribe el guion por pulsos y muéstramelo: una tabla con pulso, texto en pantalla, color de fondo y animación. Una idea por pulso o medio pulso, más un cierre de 3 a 4 segundos con el nombre de la marca y la llamada a la acción. Si entre mis datos hay una condición (plazo, garantía, letra chica), va en el cierre, en una oración completa junto al beneficio que condiciona, y ese beneficio no aparece en ningún otro plano; si no hay condiciones, no agregues nada. Espera mi visto bueno.
2. Construye una sola página HTML de 1080×1920 donde todo se calcule en una función seek(t): dado un tiempo en segundos, deja la página exactamente como debe verse en ese instante. Sin animaciones CSS, sin setTimeout ni requestAnimationFrame: así cada cuadro se puede repetir. Deja el texto, el tempo y los pulsos en un solo archivo de guion, para que cambiar una palabra sea editar una línea.
3. Los tiempos van en pulsos, no en segundos. Ajusta cada corte al cuadro más cercano para que ningún corte caiga a mitad de un cuadro. Si después cambio el tempo, se mantienen los pulsos y cambia la duración.
4. Centra el texto dentro de la zona libre: deja sin texto el 14 % superior y el 30 % inferior de la pantalla (ahí va la interfaz de reels y TikTok) y un 7 % a cada lado. La regla vale para el texto en reposo; una entrada puede cruzarla un instante. Ajusta el tamaño de cada texto al ancho disponible, midiendo después de que cargue la tipografía; ningún texto por debajo de 44 px.
5. Captura la página cuadro a cuadro con el Chrome que ya tengo instalado, sin ventana (puppeteer-core; no descargues otro navegador), llamando a seek(t). Captura 4 subcuadros por cada cuadro (120 por segundo) y promedia cada grupo de 4 para tener desenfoque de movimiento real. Cada cuadro final promedia solo sus propios subcuadros, para que el desenfoque nunca mezcle dos planos.
6. Une los cuadros con ffmpeg en un MP4 H.264, yuv420p, color bt709, 30 fps, sin pista de audio.
7. Antes de entregar, revisa tu trabajo: saca del MP4 final un cuadro en reposo por plano y, aparte, el último y el primer cuadro de cada corte. Arma con ellos una hoja de contacto (una página HTML fotografiada con el mismo Chrome), mírala y corrige texto cortado o fuera de la zona libre, planos cuyo primer cuadro no muestre ya una parte reconocible del texto y cuadros mezclados en los cortes. Recién entonces dime que está listo.
ENTREGA
- El MP4 final y la hoja de contacto.
- Una lista con el segundo exacto de cada corte, marcando los que abren una oración del guion, para alinear la música. Si algún corte se movió por el ajuste a cuadros, indícalo.
- Un comando para volver a exportar si cambio el texto o el tempo.
Si falta instalar algo (Node, ffmpeg, puppeteer-core), dime qué es y pídeme permiso antes de instalar. Trabaja solo dentro de esta carpeta.
Por qué funciona
El video es una página web. Cada palabra es texto real, con tu tipografía, así que no hay letras deformadas ni faltas de ortografía inventadas. Cambiar una frase es cambiar una línea.
Todo depende del tiempo. La página sabe cómo debe verse en cualquier instante, y por eso se puede fotografiar cuadro a cuadro sin que nada salte.
Los cortes van por pulsos. Le das el tempo de tu canción y cada corte cae en el golpe, sin ajustar nada a mano.
El desenfoque es real. Se capturan cuatro imágenes por cada cuadro y se promedian. Eso es lo que hace que el movimiento se vea suave y no a saltos.
Claude revisa antes de entregar. El último paso del prompt le pide mirar sus propios cuadros. En las pruebas encontró así planos que partían vacíos y los corrigió solo.
Si algo sale mal
| Qué ves | Qué pedir |
|---|---|
| Una palabra se corta o se sale de la pantalla. | «Revisa la hoja de contacto: la palabra X se sale. Ajusta el tamaño y exporta de nuevo.» |
| Los cortes no calzan con la música. | La pista va a otro tempo. Dile el BPM real de tu canción y que vuelva a exportar. |
| Un plano parte vacío o parpadea en el corte. | «Muéstrame el último y el primer cuadro de cada corte y corrige los que salgan vacíos o mezclados.» |
| Va muy rápido para leerlo. | «Deja las palabras clave un pulso completo y las de paso medio pulso.» |
| El movimiento se ve como copias escalonadas en vez de desenfoque. | «Usa 8 subcuadros por cuadro en vez de 4.» |
| No encuentra Chrome. | Dile dónde está instalado en tu computador. |
Qué tan probado está
Ejecuté este prompt dos veces desde cero: en una carpeta vacía, con marcas inventadas y sin darle nada más a Claude. La primera vez entregó un video de 12 segundos y 17 planos; la segunda, uno de 14 segundos y 21 planos, con una condición de envío que dejó solo en el cierre, como pide el prompt. Los dos salieron sin pista de audio y con todos los cortes limpios, y en ambos Claude encontró y corrigió errores al revisar sus propios cuadros. Lo único que instaló fue puppeteer-core y una tipografía libre. El video de arriba es el primer resultado, sin retoques.
Después de cada prueba afiné la redacción con lo que resultó ambiguo. Lo que no he comprobado: cómo funciona en Windows.
El método nació en un trabajo real: un anuncio de 15 segundos para mi estudio, Forrate.
Lo que no hace
- No pone música ni voz: el video sale mudo.
- No genera fotos ni personas. Si quieres mostrar tu producto, dale tus propias imágenes y dile dónde usarlas.
- No inventa datos. Lo que no esté en tus datos confirmados, no debería aparecer; revísalo igual antes de publicar.