Opus 5.5 lleva los videos con código más lejos: 5 casos sorprendentes y sus prompts

Entiende el renderizado por fotogramas y la creación de sonido con Opus 5.5. Cinco casos de magos de píxel, UI, historia de los videojuegos, baile e historia de la IA, con prompts que conservan sus parámetros.

Una silueta de ave violeta alza el vuelo sobre una pincelada ocre ancha, entre capas de óleo color crema y lila

Opus 5.5 hace videos escribiendo código de animación: dibuja las imágenes, organiza las tomas y el sonido, y después renderiza un MP4. Un mago de píxel, las animaciones de una interfaz, la historia de los videojuegos y la edición visual de un baile pueden producirse por esta vía.

Cómo funciona: dibujar cada fotograma y unirlos en un video

Puedes imaginarlo como un folioscopio dibujado con código. El código define qué elementos aparecen en un momento, dónde están y cómo cambian. La herramienta de renderizado extrae las imágenes en orden y, al codificarlas, obtiene un video.

En un sistema web que genera cada fotograma, la página puede ofrecer render(t) o seek(t): al recibir un tiempo, dibuja la imagen correspondiente. A 30fps, por ejemplo, el fotograma n corresponde a t = n / 30. Playwright abre la página, sitúa el tiempo y captura la imagen; FFmpeg combina la secuencia de fotogramas y las pistas de sonido en un MP4. Remotion, HyperFrames y otros frameworks tienen sus propios controles de tiempo o de fotograma.

La imagen debe poder reproducirse a partir del tiempo. Fija las semillas de los efectos aleatorios y espera a que carguen las fuentes antes de capturar. Evita animaciones que solo avancen mediante temporizadores: al volver a renderizar una toma concreta, podrías obtener otro resultado.

El sonido también puede generarse con código. numpy y scipy, en Python, permiten calcular ondas de notas y percusión y superponerlas en el tiempo para crear música y efectos. Si ya tienes música, busca primero sus pulsos y después sitúa los movimientos. Puedes usar un modelo de voz para la narración y alinearla con la misma línea de tiempo de las imágenes.

Siete tipos de código y sus usos visuales

VíaUso principal
JavaScript+Canvas 2DPíxeles, formas 2D e ilustraciones
HTML/CSS/SVGInterfaces, texto y animaciones de productos de software
Shaders WebGLLíneas de barrido, grano, reflejos y partículas
Three.jsObjetos 3D, espacios y movimientos de cámara
p5.js+p5.brushLápiz de color, acuarela y trazos sobre papel
HyperFrames/RemotionOrganización de la línea de tiempo, las tomas y el renderizado completo
ManimFórmulas, geometría y explicaciones matemáticas

Puedes combinar estas vías: dibujar el juego con Canvas, superponer la textura de un televisor antiguo con shaders y pasar a una escena 3D con Three.js. Si necesitas mostrar un objeto real con precisión, puedes proporcionar un modelo 3D existente.

1. Mago de píxel: un lienzo pequeño y un ciclo completo de acciones

Esta animación pasa por espera, elevación del bastón para reunir energía, lanzamiento y regreso a la postura inicial. El personaje se dibuja primero en un lienzo de 128×96 y luego se amplía por un factor entero. La postura cambia unas 8–12 veces por segundo; las chispas y los proyectiles se mueven en cada fotograma para conservar el ritmo entrecortado de la animación de píxeles.

Los siguientes prompts condensan los parámetros y las restricciones de producción de cada caso. Puedes copiarlos y usarlos directamente.

Prueba este prompt
Crea un HTML autónomo que muestre a un mago de píxel lanzando un hechizo con JavaScript nativo y Canvas 2D. No uses bibliotecas, imágenes ni materiales de la red.

El lienzo lógico debe medir 128×96 y ampliarse por un factor entero, centrado en pantalla. Desactiva el suavizado de imagen y coloca todas las coordenadas en píxeles enteros. No uses degradados, antialiasing ni sombras difuminadas. Usa unos 24 colores en toda la pieza: azul oscuro y violeta en el fondo, tonos cálidos en el personaje y unos pocos colores brillantes para la magia.

Construye un mago de unos 24×32 con rectángulos de píxeles: sombrero curvado, barba, túnica de dos colores y bastón con gema. Define parámetros de postura para cabeza, brazos, bastón y borde de la túnica. Ejecuta a 60fps, cuantiza los cambios de postura a 8–12 veces por segundo y mantén las partículas en movimiento continuo.

La secuencia debe incluir balanceo en espera, elevación del bastón para reunir energía, chispas que convergen en la gema, liberación de un anillo de luz y proyectiles, y regreso a la postura inicial. Agrega una sacudida de 1–2 píxeles al lanzar el hechizo. Preasigna y reutiliza las partículas; no crees objetos nuevos dentro del bucle.

Conserva una luna, unas pocas estrellas y suelo de piedra en el fondo. Refuerza la silueta del personaje con la luz de la gema. Conecta el inicio y el final con naturalidad y mantén los píxeles nítidos en cualquier tamaño de ventana.

2. Interfaz que se transforma: una figura que pasa por distintos componentes

Una forma en blanco y negro se convierte en botón, estado de carga, reproductor, deslizador y gráfico. Siempre cambia el mismo elemento de manera continua, mientras los clics y arrastres del cursor impulsan la acción.

La interfaz se construye con HTML/CSS/SVG. Los cálculos de resorte controlan el rebote, los pulsos musicales organizan las acciones y la mezcla de cuatro subfotogramas por fotograma produce el desenfoque de movimiento.

Prueba este prompt
Primero pídeme 8–12 estados de interfaz, un esquema en blanco y negro o con un solo color de acento, y música disponible de unos 120 BPM. Enumera la correspondencia entre estados y pulsos y empieza a producir después de mi confirmación.

Crea una animación de interfaz HTML de 1440×1440. Usa un fondo gris claro cálido, componentes en blanco y negro y la fuente Geist. Mantén un único elemento protagonista y transfórmalo mediante cambios de tamaño, radio de las esquinas y contenido interno, sin sustituir componentes con cortes de plano. El cursor debe hacer clic o arrastrar de verdad.

Organiza 7 compases a 120 BPM: botón→carga→marca de finalización→Dynamic Island→reproductor→barra de progreso→deslizador de volumen→interruptor→pestañas→gráfico→panel de comandos→notificación→botón. Asigna las acciones a sus pulsos y haz que el zoom de cámara siga al protagonista.

Calcula todos los estados mediante seek(t), sin CSS transition, temporizadores ni estado acumulado del fotograma anterior. Usa resortes analíticos y calcula por separado los de ambos extremos del indicador para mostrar su estiramiento. Durante el arrastre, el valor depende de la posición del cursor; el rebote comienza al soltarlo.

Analiza los pulsos de la música con Python y alinea con ellos movimientos y efectos sonoros. Toma 4 muestras por fotograma con Playwright y mézclalas con FFmpeg para producir desenfoque de movimiento. Exporta a 60fps. Revisa las imágenes fijas de cada pulso antes de renderizar la pieza completa.

Evita explosiones de partículas, resplandores, degradados y rebotes innecesarios. Controla por separado la entrada y salida de los textos antiguos y nuevos para evitar superposiciones. No agregues will-change a los elementos ampliados o con texto. Conecta inicio y final, incluida la posición y la velocidad del cursor.

3. Historia de los videojuegos: cambiar de estilo con cada época

La historia de los videojuegos de dos minutos combina píxeles de Canvas, efectos de televisor antiguo con WebGL y escenas 3D con Three.js, con música sintetizada en Python. Los primeros juegos usan píxeles y líneas de barrido; después, el recorrido entra en pasillos, castillos y mundos de bloques.

Prueba este prompt
Crea un cortometraje de 120 segundos sobre la historia de los videojuegos, con una expresión épica y cambios emocionales propios del tráiler de un documental.

Las especificaciones son 1920×1080 y 60fps. Dibuja todas las imágenes con código y no obtengas imágenes ni videos externos. Compón la música y sintetízala mediante código, sin muestras, materiales de audio ni instrumentos virtuales. Organiza los cambios de imagen con el ritmo musical.

Al terminar, combina imágenes y música en un MP4 y guárdalo en el directorio de salida que te indique.

4. Baile dulce y atrevido: separar al personaje de los efectos

Primero genera con un modelo de video un baile de 15 segundos sobre fondo verde. Después, pide a Opus que quite el fondo y agregue letras grandes, cinta, pantalla dividida, cambios de fondo y texto 3D alrededor del personaje, con una presentación que cambie al ritmo de la música.

Los movimientos del personaje vienen del video; las escenas y los efectos se construyen con código. No hace falta volver a dibujar un baile complejo mediante código. Conserva el material del personaje y concentra el trabajo en el croma, las capas y el ritmo.

5. Historia de la IA: un protagonista visual que une una pieza larga

La historia de la IA de tres minutos se realiza en Claude Code con Remotion. Las imágenes se dibujan con código SVG, Canvas y otras técnicas; un modelo de voz produce la narración y Python sintetiza la música.

Un token luminoso une toda la pieza: desde las conexiones de atención hasta los modelos de lenguaje, la multimodalidad, el razonamiento y las llamadas a herramientas. Cada capítulo sigue la misma pista visual. En una pieza larga, lo principal es planificar primero el relato y el storyboard y producir después cada escena.

Prueba este prompt
Crea con Remotion una animación de 180 segundos sobre la historia de la IA, a 1920×1080 y 30fps: 5400 fotogramas en total. Parte del mecanismo de atención de 2017 y avanza hacia modelos de lenguaje, multimodalidad, razonamiento, agentes y la cuestión todavía abierta de la AGI. Usa la expresión de un ensayo audiovisual cinematográfico.

Haz que el token luminoso “the” recorra toda la pieza. Escribe primero STORYBOARD.md con tiempos, imágenes, subtítulos y transiciones de cada escena. Organiza cada escena por separado y conéctalas al final en la composition principal.

Sigue estos capítulos:0–15 segundos, una palabra aislada;15–35, conexiones de atención;35–55, expansión de los modelos de lenguaje;55–80, ajuste por instrucciones y ChatGPT;80–100, multimodalidad;100–125, razonamiento;125–150, herramientas y agentes;150–170, la pregunta por la AGI. En los últimos 10 segundos, vuelve al token y al título.

Usa SVG, Canvas, CSS y gráficos procedurales, sin imágenes externas ni videos existentes. Usa fondo oscuro y acentos cálidos, con resortes y easing para controlar el movimiento. Construye las transiciones a partir de la relación gráfica entre escenas contiguas.

Mantén breves los textos en pantalla y muestra cada uno durante al menos 2.5 segundos. Verifica años, nombres y títulos de artículos académicos; registra lo incierto en NOTES.md. Al terminar cada escena, revisa 3–4 imágenes fijas con remotion still y corrige superposiciones y composición antes de continuar.

Reserva una pista opcional en public/music.mp3. Si falta audio, puedes exportar primero una versión sin sonido. Al final, exporta out/film.mp4 con remotion render y entrega también una explicación creativa y NOTES.md.

Las siete piezas de información más útiles en un prompt

Puedes usar role para el papel de producción, inputs para los materiales necesarios, direction para el estilo y los efectos que debes evitar, structure para tomas y ritmo, build para tecnología y exportación, gotchas para errores frecuentes y start para acordar qué ver primero y cuándo confirmar.

Sé especialmente concreto con lo que no quieres: texto diminuto por toda la pantalla, todos los elementos entrando a la vez con un fundido o la repetición de letras grandes centradas sobre un fondo degradado. Revisa primero el storyboard y los fotogramas clave, mira muestras de unos segundos donde el movimiento sea importante y confirma antes de renderizar todo.

Antes de entregar, extrae fotogramas y comprueba legibilidad en el celular, superposición de textos, pausas, composición, pulsos y sincronía entre imagen y sonido. Marca los tiempos problemáticos y vuelve a renderizar esas partes. Estos requisitos comprobables ayudan más a mejorar que repetir "hazlo más sofisticado".

PagePop Content TeamVolver arriba

Cuéntale a PagePop qué quieres lograr

Comenzar: Cuéntale a PagePop qué quieres lograr