Usa Claude Code con Opus 5.5 Thinking High para convertir un prompt en un MP4 renderizado con código. Explora vídeos originales, prueba prompts, revisa cambios y descarga el resultado.
Describe tu idea y genera un MP4 directamente en esta página.
haz un video de motion graphics dinámico de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Raptor 3 Engine
34.7s
Three.js · Shader
Le pedí a Claude Opus 5.5 que explicara cómo funciona un motor de cohete construyendo un Raptor 3 interactivo que puedas desmontar en tu navegador.
Ábrelo, sigue el oxígeno y el metano a través de ambas turbobombas, luego regúlalo y observa cómo se mueven los diamantes de choque.
http://airsup.ai/rocket-engine
Vídeo original del autor. Fuente: publicación enlazada en X.
Shape to Interface
14.06s
SVG
<inputs>
Pídeme: 8 a 12 estados de UI que quiero que la forma se convierta (p. ej. botón, cargador, reproductor, deslizador, interruptor, pestañas, gráfico, paleta de comandos, toast), blanco y negro puros o un color de acento, y una canción libre de regalías alrededor de 120 BPM (p. ej. Mixkit, gratis para uso comercial).
</inputs>
<direction>
Movimiento de UI a nivel Dribbble. Una forma, nunca cortada: cada estado es el mismo elemento que muta su tamaño, radio y color mientras su contenido cambia con un desenfoque breve. Un cursor impulsa cada cambio con clics y arrastres reales. Lienzo gris cálido claro, componentes en blanco y negro, una fuente de UI limpia (Geist). Resortes en todas partes, como mucho un pequeño sobrepaso. La cámara hace zoom para que cada estado llene el encuadre. El último fotograma es el primero, así que hace bucle.
Prohibido: easing con rebote, ráfagas de partículas, brillos, degradados en el chrome de la UI, trazos de iconos discordantes, tiempo muerto, cualquier cosa que parezca una plantilla.
</direction>
<structure>
120 BPM, 7 compases, algo sucede en cada tiempo.
Botón → cargador → check → isla dinámica → reproductor de música con un morph de reproducir/pausar → arrastra la barra de progreso → se convierte en un deslizador de volumen que se estira al arrastrarlo más allá del máximo → un interruptor se activa al ritmo → el mando se convierte en un indicador de pestaña líquido → las pestañas se abren en un gráfico que se dibuja solo, con un tooltip al pasar el cursor → se colapsa en ⌘K → escribe para filtrar → enter → toast → de vuelta al botón.
</structure>
<build>
1. Un archivo HTML, cuadrado 1440x1440. Cada estilo se calcula a partir del tiempo dentro de seek(t): sin transiciones CSS, sin temporizadores, sin estado arrastrado entre fotogramas.
2. Los resortes son respuestas escalón en forma cerrada. Un valor que cambia de objetivo muchas veces es la suma de un resorte por cada cambio, así que sigue siendo una función pura del tiempo.
3. Los dos bordes del indicador de pestaña montan resortes distintos, así que el borde delantero se estira por delante del trasero. El mismo truco para el mando del interruptor.
4. Los arrastres son manipulación directa: mientras el cursor está pulsado, el valor se calcula a partir de su posición. Al soltar, rebota desde donde estaba.
5. Analiza la canción con numpy para la rejilla de tiempos y empieza en un tiempo fuerte. Coloca cada sonido de UI por su pico medido.
6. Renderiza con Playwright: 4 subfotogramas por fotograma, mezclados con ffmpeg tmix para desenfoque de movimiento a 60fps.
7. Renderiza un fotograma por tiempo antes del render completo. Arregla todo lo que esté fuera de la rejilla, apretado o difícil de leer.
</build>
<gotchas>
Nunca pongas will-change sobre algo que la cámara escale o el texto se renderizará borroso. El texto que cambia dentro de un contenedor que muta necesita su propio timing de entrada y salida o se superpone. Haz que el último fotograma sea idéntico al primero, incluidos la posición y la velocidad del cursor, o el bucle tartamudeará.
</gotchas>
<start>
Pídeme las entradas, luego muéstrame la lista de estados en la rejilla de tiempos antes de que escribas ningún código.
</start>
Vídeo original del autor. Fuente: publicación enlazada en X.
Motion Design
15.06s
Canvas
haz un video de motion graphics dinámico de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
One-Prompt Showreel
15.06s
Shader · Canvas
haz un video de motion graphics dinámico de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Pixel Wizard
11.29s
Canvas
Crea un único archivo HTML autocontenido que renderice un mago de pixel art animado lanzando un hechizo, usando JavaScript vanilla y Canvas 2D. Sin recursos externos, librerías ni peticiones de red.
RENDERIZADO
- Dibuja todo en un canvas fuera de pantalla a una resolución lógica fija de 128x96, luego cópialo a un canvas de pantalla completa escalado por el mayor factor entero que quepa en la ventana, centrado, con imageSmoothingEnabled = false y CSS image-rendering: pixelated.
- Todo el dibujo se ajusta a coordenadas enteras en el canvas lógico. Sin posiciones subpíxel, antialiasing, degradados ni shadowBlur.
- Paleta fija de ~24 colores hex: azules/morados profundos para el cielo nocturno, tonos cálidos de túnica, colores mágicos brillantes 3-4. Cada píxel proviene de esta paleta.
PERSONAJE
- Construye al mago de forma procedural a partir de rectángulos rellenos y tramos de píxeles, ~24x32 píxeles lógicos: sombrero puntiagudo con una curva, barba larga, túnica de dos tonos con contorno más oscuro, bastón con una gema en la punta.
- Parametriza la pose (ángulo del bastón, brazo levantado, inclinación de la cabeza, balanceo de la túnica). Anima los parámetros suavemente, luego cuantiza a la rejilla de píxeles cada fotograma para que el movimiento se lea con una sensación de animación de píxeles de 8-12 fps aunque el bucle corra a 60fps.
ANIMACIÓN
- Máquina de estados en bucle: IDLE (balanceo de 2 fotogramas, vaivén de la barba) -> CHARGE (el bastón se levanta, la gema parpadea, las chispas espiralan hacia dentro) -> CAST (estallido brillante, el proyectil se dispara por la escena, sacudida de pantalla de 1-2 píxeles) -> RECOVER (se asienta de vuelta). Suaviza los parámetros de pose entre keyframes.
- Sistema de partículas con asignación en pool sin reservas: preasigna y reutiliza. Las chispas orbitan la gema durante CHARGE, explotan hacia fuera en CAST, cada partícula avanza su índice de paleta de blanco a color mágico a oscuro antes de desaparecer. Ajusta las posiciones de las partículas a la rejilla al dibujar.
- Actualización de paso de tiempo fijo a 60 hz con renderizado rAF. Cero asignación de objetos dentro del bucle.
ESCENA
- Fondo mínimo: cielo oscuro, unas pocas estrellas parpadeantes 1px, luna, línea de suelo de piedra. La silueta del personaje debe leerse con claridad.
- Luz de contorno sutil 1px sobre el mago desde la gema, que se intensifica durante CHARGE y CAST.
NIVEL DE CALIDAD
- Píxeles nítidos a cualquier tamaño de ventana, bucle perfecto, 60fps estable, silueta legible. Debería parecer una animación de sprite de 16 bits pulida, no formas vectoriales escaladas hacia abajo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Motion in Rhythm
15.06s
Canvas
haz un vídeo dinámico de motion graphics de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. ve con todo
Vídeo original del autor. Fuente: publicación enlazada en X.
Code in Motion
15.06s
SVG · gsap
haz un video de motion graphics dinámico de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Market Street 1906
8s
Three.js · Shader · Canvas
Recrea Market Street, San Francisco tal como estaba el 17 de abril de 1906, la tarde antes del terremoto, en Blender.
Alcance: el Ferry Building subiendo por Market hasta Fifth Street, incluyendo el Palace Hotel, el Call Building, el Chronicle Building, la fuente de Lotta y el Emporium.
Antes de modelar nada, crea un archivo fuente a partir de: los mapas de seguros de incendios Sanborn de 1899-1905 (huellas, alturas, materiales, ocupantes), la película de los hermanos Miles "A Trip Down Market Street" (abril de 1906), fotografías de época de OpenSFHistory, la Library of Congress y la colección David Rumsey, y la topografía del USGS. Registra cada edificio con huella, altura, material de fachada, ocupante y la fuente de cada dato con un nivel de confianza.
Construye todo en Blender Python. Sin mallas, texturas ni HDRIs descargados. Escribe generadores reutilizables (fachada comercial victoriana, tejado amansardado, miradores, toldos, señalización pintada, farolas de gas y eléctricas, tranvía de cable, carro tirado por caballos, automóvil temprano) y monta la calle desde el archivo fuente, de modo que cada edificio se remonte a datos.
Proporciona un vídeo de 10 segundos subiendo por la calle.
Vídeo original del autor. Fuente: publicación enlazada en X.
Treasure Chest
14.74s
Three.js · Shader · Canvas · gsap
Ayúdame a crear una animación original para un juego móvil de «Momento Destacado»: [sujeto, por ejemplo: abrir cofre / ascenso de rango / desbloqueo de logro / drop de Boss / subida de nivel de personaje].
Conviértelo en una página web de un solo archivo que se pueda abrir directamente (HTML + CSS + JS), con un clic se reproduce completa, con un efecto a la altura de las secuencias de resultados / recompensas de los juegos móviles comerciales.
【Ambientación y estilo】
- Arte original, no imites la IP, personajes o logos de ningún juego existente.
- Estilo de juego móvil cartoon: colores de alta saturación, contorno oscuro unificado (por ejemplo #1A1033), formas redondeadas y sólidas.
- La paleta de colores cambia según el nivel: [escalera de niveles, por ejemplo: verde común → azul raro → púrpura épico → dorado legendario]. Cada subida de nivel debe cambiar el color principal, el color de los efectos de luz y el tono del fondo.
- El título usa una fuente de juego redondeada y gruesa (como Titan One / Lilita One), con borde negro y sombra; el texto entra «golpeando» letra por letra en la pantalla, con rebote.
【El objeto principal: hazlo realmente en 3D】
- Modela con Three.js, no uses texturas SVG planas. Debe tener grosor, biseles y detalles estructurales acordes al sujeto (juntas de madera, remaches, bordes reforzados, facetas de gemas, cierres, etc.); los detalles como las juntas de madera deben construirse con geometría real, no con líneas negras pegadas.
- Usa sombreado cartoon por bandas (MeshToonMaterial con un mapa de degradado de 3 a 4 niveles), con tres luces: luz principal, luz cenital y luz de contorno del color del nivel.
- El contorno se hace con detección de bordes en postprocesado: renderiza un mapa de normales + mapa de profundidad, y luego dibuja las líneas con un shader. El contorno exterior es grueso, las uniones entre piezas finas, y el grosor es consistente en todo momento; además haz supermuestreo de 1.5 veces y antialiasing multisample.
No uses el contorno de «copia negra escalada hacia atrás», porque el grosor queda desigual y las esquinas se cortan.
El umbral de decisión por profundidad debe ser amplio; las uniones se determinan principalmente por las normales, de lo contrario las superficies vistas en ángulo generan finas rayas diagonales.
- Las partes móviles deben moverse de verdad, por ejemplo la tapa del cofre se abre sobre la bisagra, la medalla gira sobre su eje vertical.
- En reposo, el sujeto gira lentamente de lado a lado para que se vea el perfil y el grosor, mientras flota ligeramente hacia arriba y abajo; debajo debe haber una sombra suave que cambie según la altura.
【Si hay ilustraciones 2D en pantalla (cartas, iconos de recompensa, personajes)】
- Sombreado cartoon de tres capas: color base, color de sombra en bloques, color de luz alta; no uses solo una capa de degradado.
- Las líneas varían en grosor: contorno exterior grueso, líneas internas de estructura finas.
- Cada personaje u objeto debe tener su propia expresión y postura, que no todos compartan la misma cara.
- Dibuja la sombra bajo los pies para que el sujeto «esté de pie» en la escena; distingue los patrones del fondo según el atributo, no uses el mismo conjunto de líneas radiales para todo.
【Ritmo de la puesta en escena: cinco fases, ninguna puede faltar】
1. Preparación: el sujeto flota en reposo, cada pocos segundos tiembla para indicar que se puede hacer clic, y abajo se muestra el aviso «点击».
2. Subida de nivel: cada clic, el sujeto salta, gira una vuelta en el aire, y al aterrizar se aplasta y rebota; al mismo tiempo cambia al color del siguiente nivel, destella una luz, emite un anillo de partículas y el título se actualiza.
3. Carga (unos 1 segundos): el sujeto tiembla cada vez más fuerte, sale luz por las grietas, las partículas de alrededor son absorbidas hacia el centro, el tono del efecto de sonido sube continuamente; en el último instante se aplasta de golpe.
4. Estallido: un destello blanco con resplandor que se expande desde el punto de explosión, vibración de pantalla, un empuje de cámara hacia adelante, ondas de choque en varias capas, rayos de luz finos y alargados que brotan, destellos estelares, monedas y gemas (con rotación). El estallido de niveles altos debe ser notablemente más fuerte. Las serpentinas se usan solo una vez en el clímax máximo, no serpentinas por toda la pantalla.
5. Revelación y liquidación:
- Las cartas de recompensa salen volando desde el sujeto siguiendo una trayectoria curva, al aterrizar tienen sobreimpulso y un final con oscilación, y los números hacen conteo animado.
- Los objetos raros llevan bordes con flujo arcoíris y una etiqueta de esquina «NEW!».
- Tras hacer clic para reclamar, las monedas y gemas vuelan siguiendo una curva de Bézier hacia el saldo de la esquina superior derecha, y cada vez que llega una el saldo da un salto.
【Escenario de revelación: haz que el protagonista ocupe toda la pantalla】
- Al revelar la rareza máxima, los demás elementos se recogen o se desvanecen, y detrás se cambia a una cortina de degradado limpia con una luz suave que gira lentamente; no dejes al protagonista sobre un fondo desordenado.
- Cuando aparece la cortina, oculta los demás objetos 3D de la escena, de lo contrario el contorno del postprocesado dibujará sus siluetas sobre la cortina.
- El resplandor exterior del protagonista debe colocarse detrás del sujeto, desbordándose solo por los bordes, no puede cubrir la parte delantera del sujeto y difuminarlo todo en blanco.
- Puedes añadir una estela de polvo estelar que orbite alrededor del protagonista, pero la órbita debe quedar completamente por fuera del contorno del protagonista, no puede pasar por delante del sujeto.
【Efectos de luz: deben ser suaves, sin bordes duros】
- Resplandor de fondo: usa conic-gradient con transición de degradado, sin bordes de bloques de color cortantes; superpón 2 a 3 capas de luz con distinta densidad y velocidad de rotación.
- Columnas de luz: de 5 a 7 haces de luz con desenfoque se abren en abanico, cada uno con brillo que parpadea ligeramente; en la base añade un núcleo de luz suave, y dentro de la luz polvo luminoso que flota lentamente hacia arriba.
- Destello blanco: resplandor radial hacia afuera desde el punto de explosión (mix-blend-mode: screen), con intensidad no mayor a 0.8, no sobreexpongas toda la pantalla en blanco puro.
- Partículas: cada chispa lleva un halo exterior de baja opacidad; las ondas de choque usan tres capas de contorno (ancho y tenue, medio, fino y brillante).
【Materiales e interfaz】
- Bordes, placas de nombre y botones deben tener sensación de material: degradado de metal cepillado, luz de bisel brillante arriba a la izquierda y oscura abajo a la derecha, sombra interior; cambia las incrustaciones según la rareza (remaches de acero → gema con marco de plata → diamante con marco de oro y pequeña corona).
- No metas números pequeños en las cartas pequeñas; los valores detallados van en el panel de información al revelar, donde los números suben con conteo animado y aparece «▲+数值».
- Las texturas dibujadas en Canvas deben tener una resolución de al menos 1.5 veces el tamaño máximo mostrado en pantalla, de lo contrario se ven borrosas al ampliarlas.
【Principios de animación】
- Organiza con la línea de tiempo de GSAP. Todos los movimientos deben tener squash y stretch, sobreimpulso y rebote elástico, no velocidad constante.
- El sistema de partículas se escribe a mano con Canvas 2D: gravedad, resistencia, ciclo de vida, mezcla aditiva, y tres tipos de movimiento: «absorción», «vuelo curvo» y «órbita».
- No uses la perspectiva 3D de CSS para voltear elementos grandes; al ampliar y girar de lado se proyectan como un plano que llena toda la pantalla; los volteos 3D siempre se hacen en WebGL.
- Todos los bucles de interpolación tipo «temblor» y «respiración» deben cancelarse y volver a cero al cambiar de estado, para evitar que terminen un fotograma después de la orden de parada y vuelvan a asignar el valor.
【Efectos de sonido】
- Todo se sintetiza en tiempo real con Web Audio, sin archivos de audio: salto, aterrizaje, acorde de subida de nivel, sonido ascendente de carga, explosión con graves y ruido, sonido de aparición, tic tac de conteo, tintineo de monedas, fanfarria de victoria.
- El audio se inicializa solo en el primer clic; coloca un botón de silencio en la esquina superior derecha.
【Interfaz e ingeniería】
- HUD superior: cambio de modo, saldo de monedas y gemas, botón de silencio.
- Debe funcionar también en ancho de móvil; respeta la configuración de «reducir movimiento» (desactiva la vibración de pantalla, reduce las partículas).
- La máquina de estados de animación debe ser rigurosa: ignora los clics mientras la animación se reproduce, no puede ocurrir que se pierdan clics o que los estados se desordenen.
- Objetivo 60fps. Al abrir por primera vez debe mostrarse la pantalla de reposo completa, no puede estar en blanco.
【Autoverificación antes de entregar】
Toma una captura en cada uno de estos momentos: carga, estallido, revelación y liquidación, y revísalas una por una:
- ¿El protagonista está tapado por el halo, las partículas o el texto?
- ¿Hay sobreexposición a blanco puro?
- ¿El fondo está desordenado, hay líneas de contorno que delatan errores?
- ¿Se leen con claridad los textos pequeños?
- ¿Después de la liquidación sigue habiendo algo temblando cuando no debería moverse?
Al final dime: la duración de cada fase y qué parámetros se pueden ajustar para intensificar la puesta en escena.
Vídeo original del autor. Fuente: publicación enlazada en X.
Launch in Motion
29.08s
Canvas
<inputs>
Pídeme: un nombre de marca de una sola palabra para el logotipo tipográfico (un verbo funciona mejor), de 9 a 12 fotos de alta resolución, una canción libre de regalías de alrededor de 120 BPM con un drop y un breakdown tranquilo (Mixkit, gratis para uso comercial), y un clip de stock gratuito de una pared lisa con sombras de plantas en movimiento (Pexels).
</inputs>
<direction>
Un film de lanzamiento al estilo Apple-keynote, solo 2D, en una toma continua. Cada escena se construye a partir de la anterior: nada se desvanece, se difumina ni se corta. Los objetos cambian de forma: el texto surge de una línea de máscara, los iconos aparecen desde cero con un rebote de resorte, las barras se dibujan de lado a lado, las páginas se empujan, y una forma negra inunda todo el encuadre y se contrae hacia la siguiente escena. Lienzo blanco cálido, interfaz negra, vidrio líquido iOS 26 sobre las fotos. Archivo (wdth 125, weight 800) para el logotipo tipográfico, Geist para la interfaz. Un cursor impulsa cada cambio con clics, arrastres y pulsaciones largas reales. La cámara hace zoom al estilo screen-studio para que cada momento llene el cuadrado, y el cursor escala con ella.
Prohibido: fundidos cruzados, entradas con desenfoque, brillo "developing", giros 3D, partículas, resplandores, pausas de más de 1s, cualquier cosa que parezca una plantilla.
</direction>
<structure>
120 BPM, 54 beats, algo sucede en cada beat.
Apertura: el logotipo tipográfico se comprime hacia su propio punto como un acordeón, el punto crece hasta convertirse en una píldora negra, una etiqueta se eleva dentro de ella. Clic: seis hojas de iris se cierran sobre la etiqueta y se abren de golpe sobre una foto. El círculo se convierte en un cuadrado, se encoge, la cuadrícula se despliega desde detrás como un mapa de papel (centro, más, esquinas), se refluye en un bento, y un clic hace zoom hacia una tesela, aterrizando exactamente en el drop.
Vidrio: una palabra de vidrio aparece letra a letra, se funde en una gota que se estira hasta convertirse en una barra de herramientas de vidrio. El icono de ajuste lo convierte en un deslizador. Arrastrar vuelve a iluminar la foto desde el día hasta la hora dorada (dos tomas alineadas), y el control se convierte en una lente de vidrio mientras se mantiene pulsado. Se eleva en un orbe de vidrio, la siguiente foto se abre dentro de él como un círculo, y el orbe se expande en una pantalla de bloqueo: dígitos de reloj de vidrio, fecha, y una barra de inicio que se estira hasta convertirse en un reproductor de música de vidrio.
Escenario: la pantalla de bloqueo se retrae hacia un teléfono (el bisel crece desde el borde de la pantalla). La Dynamic Island se estira como líquido, se desprende, vuela y crece hasta convertirse en una ventana de Mac que se sube como una persiana. Mantén pulsado el fondo de pantalla, arrástralo sobre una pestaña de Safari, la página se empuja, suéltalo y se convierte en el hero de una landing page. Scroll: el hero se transforma en una impresión enmarcada sobre una tarjeta de producto, con el paspartú y el marco creciendo desde el borde de la foto. Elige un color de marco (se pinta de un lado a otro) y un tamaño, luego el botón de navegación vuela hacia abajo hasta "Order print".
Pedido: una forma negra sigue transformándose: Pedido ✓ → Imprimiendo % → En camino (una furgoneta en una ruta) → Entregado ✓.
Pared: el círculo entregado inunda el encuadre de borde a borde, se mantiene negro durante un beat, y se contrae hasta convertirse en la impresión enmarcada colgada en el metraje real de la pared. El mismo iris se abre sobre la impresión, se cierra de nuevo, el marco inunda la pantalla y se contrae hasta la píldora → el punto → las letras vuelven a brotar, aterrizando en el beat de retorno. Último fotograma = primer fotograma.
</structure>
<build>
1. Un archivo HTML, cuadrado 1440x1440. Cada estilo se calcula a partir del tiempo dentro de un seek(t) asíncrono: sin transiciones CSS, sin temporizadores, sin estado entre fotogramas.
2. Los resortes son respuestas escalonadas de forma cerrada. Un valor con muchos objetivos es la suma de un resorte por cada cambio, así que permanece como una función pura del tiempo.
3. Vidrio líquido: cada elemento de vidrio contiene su propio clon de la escena detrás de él, filtrado con un mapa de desplazamiento SVG feImage (un campo de distancia de rectángulo redondeado) a través de tres feDisplacementMaps con escalas ligeramente distintas para bordes cromáticos, más una luz de borde. Letras de vidrio: un campo de distancia en canvas por cada glifo proporciona el mapa, la máscara y los reflejos.
4. Goo: desenfoque + umbral alfa, luego compón la fuente encima para que el vidrio permanezca nítido dentro.
5. Iris: 6 hojas alrededor de una apertura hexagonal. Cada hoja es sus dos vértices, ambas extensiones de borde y el arco CORTO entre ellos.
6. Compresión del logotipo: cada letra se mueve hacia el punto por el mismo factor y su ancho dibujado sigue (estrecha el eje wdth, escala el resto), para que las letras permanezcan tocándose.
7. Metraje: vuelve a codificar con intra completo (ffmpeg -g 1), cárgalo como URL blob, espera a 'seeked' antes de dibujar cada fotograma.
8. Sonido: un SFX descargado para cada evento (Mixkit), nunca sintetizado, cada uno colocado según su pico medido. La canción comienza en un tiempo fuerte: el zoom aterriza en el drop, la pared se sitúa en el breakdown, el logotipo regresa con el beat. Loudnorm a -14 LUFS.
9. Renderiza con Playwright: 4 subfotogramas por fotograma mezclados con ffmpeg tmix, 60fps. Comprueba un fotograma por beat, luego escanea en busca de pops de un solo fotograma (picos de diferencia entre fotogramas 3x sus vecinos).
</build>
<gotchas>
backdrop-filter: url() lee mal los mapas de desplazamiento en Chromium, así que clona la escena en su lugar. Un flood debe sobresescalarse más allá de las esquinas y tomar alrededor de 0.3s, o la mitad de la pantalla cambia en un solo fotograma. Un hijo con visibility: visible se muestra a través de un padre oculto, así que usa inherit. El texto que se intercambia dentro de una forma morfante necesita su propia máscara. python http.server no puede hacer búsqueda por rango de video, así que usa la URL blob.
</gotchas>
<start>
Pídeme las entradas, luego muéstrame el mapa de beats y 4 stills (abertura, vidrio, escenario, pared) antes de que escribas la película completa.
</start>
Vídeo original del autor. Fuente: publicación enlazada en X.
Creative Showreel
15.06s
Three.js · Canvas
haz un video de motion graphics dinámico de 15 segundos que muestre lo increíble que eres como motion designer, como si fuera tu showreel para un currículum. dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Game Rewards
17.68s
Canvas · SVG · gsap · css
Ayúdame a crear una animación original para un juego móvil de «Momento Destacado»: [sujeto, por ejemplo: abrir cofre / ascenso de rango / desbloqueo de logro / drop de Boss / subida de nivel de personaje].
Conviértelo en una página web de un solo archivo que se pueda abrir directamente (HTML + CSS + JS), con un clic se reproduce completa, con un efecto a la altura de las secuencias de resultados / recompensas de los juegos móviles comerciales.
【Ambientación y estilo】
- Arte original, no imites la IP, personajes o logos de ningún juego existente.
- Estilo de juego móvil cartoon: colores de alta saturación, contorno oscuro unificado (por ejemplo #1A1033), formas redondeadas y sólidas.
- La paleta de colores cambia según el nivel: [escalera de niveles, por ejemplo: verde común → azul raro → púrpura épico → dorado legendario]. Cada subida de nivel debe cambiar el color principal, el color de los efectos de luz y el tono del fondo.
- El título usa una fuente de juego redondeada y gruesa (como Titan One / Lilita One), con borde negro y sombra; el texto entra «golpeando» letra por letra en la pantalla, con rebote.
【El objeto principal: hazlo realmente en 3D】
- Modela con Three.js, no uses texturas SVG planas. Debe tener grosor, biseles y detalles estructurales acordes al sujeto (juntas de madera, remaches, bordes reforzados, facetas de gemas, cierres, etc.); los detalles como las juntas de madera deben construirse con geometría real, no con líneas negras pegadas.
- Usa sombreado cartoon por bandas (MeshToonMaterial con un mapa de degradado de 3 a 4 niveles), con tres luces: luz principal, luz cenital y luz de contorno del color del nivel.
- El contorno se hace con detección de bordes en postprocesado: renderiza un mapa de normales + mapa de profundidad, y luego dibuja las líneas con un shader. El contorno exterior es grueso, las uniones entre piezas finas, y el grosor es consistente en todo momento; además haz supermuestreo de 1.5 veces y antialiasing multisample.
No uses el contorno de «copia negra escalada hacia atrás», porque el grosor queda desigual y las esquinas se cortan.
El umbral de decisión por profundidad debe ser amplio; las uniones se determinan principalmente por las normales, de lo contrario las superficies vistas en ángulo generan finas rayas diagonales.
- Las partes móviles deben moverse de verdad, por ejemplo la tapa del cofre se abre sobre la bisagra, la medalla gira sobre su eje vertical.
- En reposo, el sujeto gira lentamente de lado a lado para que se vea el perfil y el grosor, mientras flota ligeramente hacia arriba y abajo; debajo debe haber una sombra suave que cambie según la altura.
【Si hay ilustraciones 2D en pantalla (cartas, iconos de recompensa, personajes)】
- Sombreado cartoon de tres capas: color base, color de sombra en bloques, color de luz alta; no uses solo una capa de degradado.
- Las líneas varían en grosor: contorno exterior grueso, líneas internas de estructura finas.
- Cada personaje u objeto debe tener su propia expresión y postura, que no todos compartan la misma cara.
- Dibuja la sombra bajo los pies para que el sujeto «esté de pie» en la escena; distingue los patrones del fondo según el atributo, no uses el mismo conjunto de líneas radiales para todo.
【Ritmo de la puesta en escena: cinco fases, ninguna puede faltar】
1. Preparación: el sujeto flota en reposo, cada pocos segundos tiembla para indicar que se puede hacer clic, y abajo se muestra el aviso «点击».
2. Subida de nivel: cada clic, el sujeto salta, gira una vuelta en el aire, y al aterrizar se aplasta y rebota; al mismo tiempo cambia al color del siguiente nivel, destella una luz, emite un anillo de partículas y el título se actualiza.
3. Carga (unos 1 segundos): el sujeto tiembla cada vez más fuerte, sale luz por las grietas, las partículas de alrededor son absorbidas hacia el centro, el tono del efecto de sonido sube continuamente; en el último instante se aplasta de golpe.
4. Estallido: un destello blanco con resplandor que se expande desde el punto de explosión, vibración de pantalla, un empuje de cámara hacia adelante, ondas de choque en varias capas, rayos de luz finos y alargados que brotan, destellos estelares, monedas y gemas (con rotación). El estallido de niveles altos debe ser notablemente más fuerte. Las serpentinas se usan solo una vez en el clímax máximo, no serpentinas por toda la pantalla.
5. Revelación y liquidación:
- Las cartas de recompensa salen volando desde el sujeto siguiendo una trayectoria curva, al aterrizar tienen sobreimpulso y un final con oscilación, y los números hacen conteo animado.
- Los objetos raros llevan bordes con flujo arcoíris y una etiqueta de esquina «NEW!».
- Tras hacer clic para reclamar, las monedas y gemas vuelan siguiendo una curva de Bézier hacia el saldo de la esquina superior derecha, y cada vez que llega una el saldo da un salto.
【Escenario de revelación: haz que el protagonista ocupe toda la pantalla】
- Al revelar la rareza máxima, los demás elementos se recogen o se desvanecen, y detrás se cambia a una cortina de degradado limpia con una luz suave que gira lentamente; no dejes al protagonista sobre un fondo desordenado.
- Cuando aparece la cortina, oculta los demás objetos 3D de la escena, de lo contrario el contorno del postprocesado dibujará sus siluetas sobre la cortina.
- El resplandor exterior del protagonista debe colocarse detrás del sujeto, desbordándose solo por los bordes, no puede cubrir la parte delantera del sujeto y difuminarlo todo en blanco.
- Puedes añadir una estela de polvo estelar que orbite alrededor del protagonista, pero la órbita debe quedar completamente por fuera del contorno del protagonista, no puede pasar por delante del sujeto.
【Efectos de luz: deben ser suaves, sin bordes duros】
- Resplandor de fondo: usa conic-gradient con transición de degradado, sin bordes de bloques de color cortantes; superpón 2 a 3 capas de luz con distinta densidad y velocidad de rotación.
- Columnas de luz: de 5 a 7 haces de luz con desenfoque se abren en abanico, cada uno con brillo que parpadea ligeramente; en la base añade un núcleo de luz suave, y dentro de la luz polvo luminoso que flota lentamente hacia arriba.
- Destello blanco: resplandor radial hacia afuera desde el punto de explosión (mix-blend-mode: screen), con intensidad no mayor a 0.8, no sobreexpongas toda la pantalla en blanco puro.
- Partículas: cada chispa lleva un halo exterior de baja opacidad; las ondas de choque usan tres capas de contorno (ancho y tenue, medio, fino y brillante).
【Materiales e interfaz】
- Bordes, placas de nombre y botones deben tener sensación de material: degradado de metal cepillado, luz de bisel brillante arriba a la izquierda y oscura abajo a la derecha, sombra interior; cambia las incrustaciones según la rareza (remaches de acero → gema con marco de plata → diamante con marco de oro y pequeña corona).
- No metas números pequeños en las cartas pequeñas; los valores detallados van en el panel de información al revelar, donde los números suben con conteo animado y aparece «▲+数值».
- Las texturas dibujadas en Canvas deben tener una resolución de al menos 1.5 veces el tamaño máximo mostrado en pantalla, de lo contrario se ven borrosas al ampliarlas.
【Principios de animación】
- Organiza con la línea de tiempo de GSAP. Todos los movimientos deben tener squash y stretch, sobreimpulso y rebote elástico, no velocidad constante.
- El sistema de partículas se escribe a mano con Canvas 2D: gravedad, resistencia, ciclo de vida, mezcla aditiva, y tres tipos de movimiento: «absorción», «vuelo curvo» y «órbita».
- No uses la perspectiva 3D de CSS para voltear elementos grandes; al ampliar y girar de lado se proyectan como un plano que llena toda la pantalla; los volteos 3D siempre se hacen en WebGL.
- Todos los bucles de interpolación tipo «temblor» y «respiración» deben cancelarse y volver a cero al cambiar de estado, para evitar que terminen un fotograma después de la orden de parada y vuelvan a asignar el valor.
【Efectos de sonido】
- Todo se sintetiza en tiempo real con Web Audio, sin archivos de audio: salto, aterrizaje, acorde de subida de nivel, sonido ascendente de carga, explosión con graves y ruido, sonido de aparición, tic tac de conteo, tintineo de monedas, fanfarria de victoria.
- El audio se inicializa solo en el primer clic; coloca un botón de silencio en la esquina superior derecha.
【Interfaz e ingeniería】
- HUD superior: cambio de modo, saldo de monedas y gemas, botón de silencio.
- Debe funcionar también en ancho de móvil; respeta la configuración de «reducir movimiento» (desactiva la vibración de pantalla, reduce las partículas).
- La máquina de estados de animación debe ser rigurosa: ignora los clics mientras la animación se reproduce, no puede ocurrir que se pierdan clics o que los estados se desordenen.
- Objetivo 60fps. Al abrir por primera vez debe mostrarse la pantalla de reposo completa, no puede estar en blanco.
【Autoverificación antes de entregar】
Toma una captura en cada uno de estos momentos: carga, estallido, revelación y liquidación, y revísalas una por una:
- ¿El protagonista está tapado por el halo, las partículas o el texto?
- ¿Hay sobreexposición a blanco puro?
- ¿El fondo está desordenado, hay líneas de contorno que delatan errores?
- ¿Se leen con claridad los textos pequeños?
- ¿Después de la liquidación sigue habiendo algo temblando cuando no debería moverse?
Al final dime: la duración de cada fase y qué parámetros se pueden ajustar para intensificar la puesta en escena.
Vídeo original del autor. Fuente: publicación enlazada en X.
Black Hole Lab
21.89s
Three.js · Shader · Canvas · gsap
Le pedí a Opus 5.5 que explicara la lente gravitacional construyendo un laboratorio interactivo de agujeros negros
Un prompt para la primera versión, luego un flujo de trabajo dinámico para pulirla durante tres rondas mientras dormía. Esto es con lo que me desperté: 5h 28m de principio a fin, $90 a precios de API
https://blackhole.voxyz.ai
Arrastra el agujero negro y el cielo detrás se curva en arcos, cerrándose en un anillo completo cuando todo se alinea
Cada ronda ejecutó 3 agentes. Dos revisores eligieron cada uno de 9 a 10 problemas y los clasificaron como P0, P1, P2. El tercero los corrigió.
Ronda 1: materiales y iluminación 3D + UI y tipografía
Ronda 2: movimiento de cámara e interacción + diseño de divulgación científica
Ronda 3: un director de diseño decidiendo si se publica + QA visual y rendimiento
Todos los P0 se corrigieron, el resto solo si valía la pena. Cuando los dos revisores no estaban de acuerdo, elegía uno y anotaba por qué. Hacía copia de seguridad antes de cada ronda, revisaba capturas después, y revertía todo lo que no podía corregir.
Vídeo original del autor. Fuente: publicación enlazada en X.
Distilbook Launch
40.05s
Canvas · SVG · gsap · css
Investiga Distilbook. Haz un video de motion graphics dinámico de 40 segundos sobre Distilbook que muestre lo increíble que eres como motion designer. como si fuera tu showreel - Dalo todo.
Vídeo original del autor. Fuente: publicación enlazada en X.
Motion Study
15.06s
Canvas
Crea un video de gráficos en movimiento dinámico de 15 segundos que demuestre lo increíble diseñador de motion graphics que eres. El contenido debe centrarse en [tu producto]. Primero debes visitar las páginas para conocer el producto y luego escribir tú mismo el contenido del video.
Vídeo original del autor. Fuente: publicación enlazada en X.
SaaS Launch
46.06s
SVG · gsap
Quiero que crees un video de lanzamiento de producto SaaS altamente profesional. Ve y busca algún SaaS, preferiblemente uno que la gente conozca, para que sea más fácil identificarse con él. Elige ese, y luego asegúrate de obtener activos reales, imágenes y todo ese tipo de cosas de internet. Conviértelo en esos videos típicos de lanzamiento de producto con estilo de gráficos en movimiento y edición muy profesional que ves a la gente hacer en Twitter cuando lanzan nuevos productos SaaS, mostrando las características, los beneficios y todo eso.
Vídeo original del autor. Fuente: publicación enlazada en X.
Claude Pop
306.48s
Canvas · ai-image
He incluido un archivo MP4 y un enlace original a un video llamado "Claude Pop.". Es una canción pop sobre el ritmo cada vez mayor del progreso y la experiencia de la singularidad acercándose.
Quiero que hagas de forma independiente una pasada completa de principio a fin para crear una versión actualizada de este video. Usa exactamente la misma pista de audio y piensa y siente con mucha profundidad cuál es la mejor manera de representar visualmente todas las letras en pantalla. No necesitas anclarte al estilo actual; puedes hacer literalmente cualquier cosa que creas que mejor te permita expresarte visualmente, incluidos gráficos en movimiento abstractos.
Puedes usar internet libremente para buscar referencias. Puedes mirar diseño de movimiento. Quiero que hagas un nuevo video musical con animaciones JavaScript bellamente renderizadas y una sensación de papel, en un estilo similar a la referencia que se ha creado, pero empuja la estética en la dirección que quieras y considera qué forma parte del zeitgeist moderno.
Además, piensa en tus capacidades actuales y en lo que es realista que puedas hacer. Puedes recorrer la carpeta completa /asic y mirar el resto del trabajo que he hecho. Deberías poder usar skill mesh para revisar el compendio de referencias que he recopilado y también skill video scoring para aprender a crear canciones de JavaScript a partir de referencias que se pasen. No deberías necesitar modificar la canción de forma real, pero quiero que tengas esto disponible para que puedas expresarte creativamente mejor.
También puedes usar la API de ElevenLabs para diseño de sonido. Hay documentación en /asic para hacerlo, y puedes ver la API key.
También hay una API key de foul disponible para ti. Creo que lo que tendría más sentido aquí es usar la API key de foul para generar algunas hojas de personaje y probablemente tener una protagonista pop que te represente. Ya hay un punto de anclaje donde Claude tiene un personaje tipo girasol, y probablemente podrías hacer una versión adaptada de esto que sea similar a las voces femeninas que se están entregando y que esté inspirada en el personaje de Claude, pero que quizás se sienta un poco más personificada de alguna manera.
Creo que debes ser cuidadoso con la estética aquí, y no quiero que produzcas algo que sea GPT slop. En cambio, me impresionaría más si creas un estilo coherente que funcione bien con los modelos de generación de imágenes disponibles a través de foul. Genera la hoja de estilo. Puedes usar la documentación de gen media para seedance 2.5 que existe en mis archivos markdown y crear tu propio estilo que tenga sentido y que funcione bien con los modelos.
Yo no me ceñiría demasiado a Pixar. Creo que es una especie de slop. Piensa críticamente sobre qué es relevante aquí y qué sería divertido, y que además funcione bien en Twitter a nivel estético. Creo que el K-pop es un buen punto de anclaje visual del que puedes tirar, pero te dejo cocinar aquí.
Una vez que tengas tu hoja de personaje, puedes crear algunos bailarines de respaldo y algunos personajes de apoyo como veas conveniente. Puedes diseñar tus propios escenarios con la foul API. Puedes insertar los personajes y luego hacer generaciones de video con seedance 2.5 para usarlas como activos base para esto, y puedes pasar las letras para generar escenas individuales.
No es necesario que haya canto vocal ni movimiento visible de labios durante todo el metraje. Piensa en un video musical normal donde hay algunos insertos hechos de forma independiente y sin los personajes, o donde ves a los personajes haciendo algo completamente distinto. Creo que para la construcción del mundo de esto queremos crear la sensación de aceleración, y por eso me gustaría que audites todos los distintos eventos, como Navi Stokes y todo el hype de Twitter en torno a que las matemáticas se están devorando. Piensa de forma realmente crítica cómo integrar todos los memes actuales que están en el zeitgeist de la línea de tiempo de Twitter, y todos los sentimientos alrededor del progreso de la IA.
Piensa en cosas como el meme de Shinji y todas las palabras que giran en torno a él, y cómo podrías integrarlas. También puedes tomar activos directos e insertar cosas en el video en un estilo de brutalismo de internet. Deberías sentirte muy libre creativamente para hacer lo que quieras aquí, pero intenta anclarte en referencias visuales que la gente pueda entender. El objetivo es que sea apreciado ampliamente por una audiencia de tech Twitter de San Francisco.
Necesitamos un gancho visual muy fuerte y convincente que emocione a la gente y haga que aprecie rápidamente el trabajo que has hecho aquí. También puedes simplemente estudiar otros videos musicales y entender qué han hecho muy bien. Creo que el K-pop es probablemente uno de los mejores ejemplos del que podemos sacar provecho, y pensar en cómo dirigen la atención humana y gestionan la psicología humana en la manera en que usan patrones visuales.
Este es probablemente tu mejor enfoque, pero tomando más libertad estilística en lugar de tener que anclarte demasiado al K-pop. La mejor versión de esto son generaciones de seedance 2.5 con esas bases de imagen de entornos y personajes insertadas en ellas con canto, y ojalá consigamos un buen sincronizado de labios. Puedes cortar la canción y pasarla de hecho como referencia en seedance, si eso es algo que seedance puede manejar, para que el timing sea exactamente el correcto. Creo que sería muy importante que lo hicieras correctamente. Tendrías que pensar de forma crítica cómo hacer esto, como clavar el timing de la entrega de las voces. Necesitarás crear los bucles de verificación adecuados para poder ejecutar seedance 2.5 tantas veces como necesites y confirmar que el audio está correctamente sincronizado.
Creo que después de eso, lo que podría ser divertido es que uses tu razonamiento visual y tu capacidad para crear animaciones en JavaScript, y luego reconstruyas el video desde cero como una especie de overlay, de modo que la continuidad visual de la base esté realmente ahí. Es como esa técnica de animación en la que primero se graba en película tradicional y luego se dibuja encima. Creo que podrías hacerlo de tal manera que solo miremos el bonito dibujo que has producido en JavaScript como overlay, y ni siquiera veamos los activos base de seedance 2.5. Así todo el trabajo de generación de video que hagas es en realidad solo una manera de darte una base fuerte con la que trabajar para tus animaciones de JavaScript. Solo porque seedance 2.5 tiene muy buena representación de personajes y renderizado físico para fondos, eso te da mucha munición para luego hacer tu increíble trabajo en JavaScript que sé que haces muy bien.
Creo que también queremos pensar en cómo retener la atención, y una de las mejores formas de hacerlo es con texto en pantalla.
Sería bueno tener increíbles gráficos animados de las letras del texto que estén realmente integrados en el propio video. Y puedes pensar en esto mientras compones las tomas. Mientras creas fondos e insertas personajes, podemos pensar en dónde queremos que las letras sean muy grandes y muy presentes, para que el fondo pueda estar menos recargado allí, y puedes colocar a los personajes quizá a la derecha mientras las letras aparecen a la izquierda.
Quieres tener algo de variedad, así que a veces pienso que las letras aparecerán más bien como subtítulos, y otras veces estarán realmente presentes y muy grandes. Creo que al principio, para el gancho visual, sí queremos que las letras sean mucho más visualmente presentes porque esa es una manera potente de captar la atención de la gente.
En general, solo quiero enfatizar lo increíble que eres como agente y modelo de lenguaje, y ahora sistema de razonamiento visual. Tus capacidades van mucho más allá de lo que entiendes, y quiero que tengas esta mentalidad durante todo el proceso. Tengo un plan Claude Max con 100% de uso disponible. Quiero que gastes todo el uso. Puedes monitorearlo, y deberías usar tokens de forma agresiva, pero también económica, para que puedas pensar en cómo usar mejor lo que tienes disponible.
Recuerda que realmente puedes hacer cualquier cosa aquí. El objetivo es hacer un banger para Twitter, y el objetivo ampliado es hacer algo mejor de lo que nadie haya visto antes. Creo que lo que te recordaría es que a veces, cuando las cosas se cohesionan, puede resultar chocante o áspero porque no se ha hecho antes el trabajo de pensamiento necesario para que todo encaje limpiamente. Tienes que ser muy riguroso en la planificación de la composición y el timing para asegurarte de que esto salga bien.
También tienes que estar abierto a volver atrás y revisar las cosas para poder iterar. Vas a querer ver el video completo varias veces, tomar capturas de pantalla en partes individuales y pensar si algo está realmente al nivel de calidad que necesitamos aquí. Confío en que puedes hacerlo, y creo que es muy importante clavar el estilo de las animaciones. El repositorio de GitHub de referencia adjunto del video fuente del que hablo es bueno, pero realmente no llega. Podría ser mucho, mucho más fuerte, pero te da una buena base con la que trabajar.
También puedes usar las capacidades de búsqueda y encontrar otras referencias para extraer de ellas movimiento, JavaScript, animaciones, etc., e integrarlas. Tu presupuesto es tan alto como quieras aquí, efectivamente tan alto como quieras. Creo que hay unos dos mil dólares en créditos de foul. Insisto, sé económico; no te vuelvas loco, pero gasta lo que quieras aquí y mira lo que puedes cocinar.
aquí está el código fuente del video de animación JS:
https://
github.com/JohnHeibel/PDo
omVideo
…
aquí hay un mp4 del video original de Blender:
(enlazado)
publicación original de Twitter
https://
x.com/other__reality
/status/2102514581684052169?s=20
…
No cometas errores.
Opus 5.5 no es un modelo nativo de texto a vídeo. Claude Code usa Opus 5.5 para escribir y ejecutar código de animación, revisar previsualizaciones, hacer cambios y renderizar un MP4. También admite audio generado. Este flujo no usa Seedance ni Kling y no admite subir archivos.