Recurso gratuito · Opus 5.5
El prompt de Opus 5.5 que hace motion design en código.
Cero After Effects: cada fotograma de este vídeo es código. Aquí tienes el prompt exacto, un brief completo, un prompt por cada paso para obtener un MP4 real, y lo que falla en el primer renderizado.
El vídeo del post. Renderizado fotograma a fotograma desde una página web, montado sobre la música por el modelo.
Por Raphaël Aubry, fundador de Howseen AI · Publicado el 1 de octubre de 2026, actualizado el 5 de octubre de 2026
1 · El prompt exacto
La frase del post, para copiar y pegar en Claude
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.
Honestamente: es un punto de partida. El primer renderizado suele estar bien, pero es el bucle posterior (los pasos y los ajustes de más abajo) lo que lo convierte en un vídeo que puedes publicar.
2 · La versión que funciona mejor
El brief completo
Misma idea, pero con las reglas que evitan la mayoría de los renderizados fallidos: un motor fotograma a fotograma, un mapa de los momentos clave de la música, y 4 fotogramas de control antes del renderizado completo.
You are a senior motion designer. Build a 15-second motion graphics video in code: one HTML file, 1920x1080, 60 fps. Rules for the engine: - Every frame is a pure function of time: window.seek(t) renders frame t. No CSS transitions, no setTimeout, no Math.random (use a seeded hash). - Nothing moves linearly: springs and ease-in-out curves only. Nothing stays still for more than 1 second. - One camera: a single transform on a container, zoom interpolated smoothly. Never zoom in and out back to back. - Every scene has one idea readable in 1 second. Big type, few words. Before the full video: 1. Write a beat map: pick a tempo (e.g. 120 BPM), start every scene on a beat, put the biggest visual moment on the music drop. 2. Render 4 stills at key moments, show them to me, fix what looks weak. 3. Only then write the full seek(t) timeline. Show what a great motion designer can do: kinetic typography, morphing shapes, particles forming a word, a 3D element, a transition that carries one object into the next scene.
3 · Convertirlo en un MP4 real
Un prompt por cada paso
1.Programa cada fotograma como una función del tiempo
Esto es lo que permite exportar fotograma a fotograma, sin saltos, aunque tu ordenador vaya lento.
Rewrite the animation so every frame is a pure function of time: expose window.seek(t) that renders the exact frame at time t, with no CSS transitions, timers or random values. Set window.ready = true once fonts and images are loaded.
2.Expórtalo a un MP4 real, sin software de edición
Playwright abre la página, captura cada fotograma, y ffmpeg los une.
Write a Python script that serves this HTML locally, opens it with Playwright (1920x1080), calls window.seek(t) for every frame at 60 fps, saves each frame as PNG, then encodes them with ffmpeg into an H.264 MP4 (yuv420p, crf 18, +faststart).
3.Ajusta el montaje a la música
Usa una música libre de derechos (Mixkit ofrece algunas), y deja que el modelo encuentre el tempo y el drop.
Here is the music file. Analyse it: BPM, first beat, and the time of the drop (look at the low-frequency energy, don't trust an automatic beat grid). Then retime every scene so each cut lands on a beat and the biggest visual moment lands exactly on the drop. Mux the music into the MP4, loudness-normalised to -14 LUFS.
4 · Los ajustes
Cuando el primer renderizado es mediocre
show me a contact sheet of 12 frames and critique it like an art director
every scene must have one single idea, readable in 1 second
add motion blur and bounces, nothing should move linearly
5 · Lo que falla en el primer renderizado
Los 5 errores clásicos, y la solución
✕Texto centrado, degradado de fondo, todo aparece con fundido
La solución: Es el renderizado por defecto. Pide una escena real por idea: un objeto que se transforma, una tipografía que se mueve, una cámara que recorre la escena.
✕Movimientos lineales, que parecen «PowerPoint»
La solución: Exige resortes y curvas ease-in-out en todas partes. Nada debe empezar o detenerse de golpe.
✕Palabras que se superponen
La solución: El modelo mide el ancho del texto antes de que se cargue la fuente. Pídele que espere a document.fonts.ready antes de hacer cualquier medición.
✕Fotogramas que saltan en la exportación
La solución: Una animación en tiempo real no se exporta correctamente. Todo debe pasar por window.seek(t) (paso 1).
✕Un montaje que no coincide con la música
La solución: Nunca confíes en una grilla de tempo automática: haz que encuentre el drop en los graves, y luego ajusta la escena clave a ese punto (paso 3).
Bonus · Todo el pipeline, open source
El skill completo en GitHub
Todo lo que uso para mis vídeos es de acceso libre, bajo licencia MIT:
- el motor imagen por imagen y los scripts de renderizado (Playwright + ffmpeg)
- el análisis de la música para encontrar el tempo y el drop, y la colocación de los efectos de sonido
- el bucle de autocrítica: el modelo revisa sus propias imágenes y corrige
- el modo «remake»: recrear cualquier vídeo de lanzamiento para tu marca, imagen por imagen
Referencias
La documentación de las herramientas usadas
El pipeline se apoya en tres piezas estándar de la web, documentadas por sus editores. Si un renderizado se bloquea, casi siempre la respuesta está ahí.
- Captura imagen por imagen de una página: Playwright, Screenshots.
- Ensamblado de las imágenes en MP4 H.264: documentación de ffmpeg.
- Esperar a que las fuentes estén cargadas antes de medir el texto (el error de las palabras que se superponen): MDN, FontFaceSet.ready.
Preguntas frecuentes
Preguntas frecuentes
Respuestas cortas a las preguntas básicas sobre el método. Todo el detalle está en los pasos de arriba y en el repo de GitHub, de acceso libre.
¿Hace falta After Effects o un software de edición?+
No. Cada imagen es código dentro de una página web. Playwright abre la página y captura cada imagen, luego ffmpeg las ensambla en un MP4.
¿Qué prompt darle a Opus 5.5?+
La frase del post basta para un primer renderizado. El brief completo (sección 2) da mejores resultados: motor imagen por imagen, mapa de los momentos clave de la música y 4 imágenes de control antes del renderizado completo.
¿Por qué cada imagen debe ser una función del tiempo?+
Para exportar imagen por imagen sin saltos, incluso si el ordenador va lento: window.seek(t) dibuja exactamente la imagen t, sin transiciones CSS, temporizadores ni valores aleatorios.
¿El pipeline es gratis?+
Sí. El skill completo está en GitHub bajo licencia MIT: motor de renderizado, análisis de la música, bucle de autocrítica y modo remake.
Para profundizar
Lo que Howseen publica sobre IA y visibilidad
Howseen mide cómo ChatGPT, Gemini, Perplexity y Google AI hablan de las marcas. Estas páginas están en inglés, y todas se basan en datos o fuentes verificables.
- GEO content benchmark: 565 publicaciones en X, Instagram y TikTok clasificadas por formato.
- What is GEO?: la guía de la Generative Engine Optimization.
- How AI chooses brands: por qué una IA cita a una marca y no a otra.
- Who AI engines cite: 5331 respuestas de IA y sus fuentes.
- Howseen MCP: consultar tus datos de Howseen desde Claude.
- La comunidad GEO: Slack gratuito, prompts y playbooks.
Por cierto, ¿quién hizo esto?
¿Estás construyendo una marca o un SaaS?
Cada vez más clientes le preguntan a ChatGPT, Gemini o Perplexity qué comprar, y se quedan con las 2 o 3 marcas citadas. Howseen te muestra si eres tú a quien recomiendan, quién sale en tu lugar y qué publicar para aparecer ahí.
Recibir el informe gratuito →Gratis, sin tarjeta: 3 preguntas de compradores planteadas a ChatGPT, en unos 2 minutos.
