Prueba informal
HTML · CSS · JS · y nada más

4 revoluciones,
7 IA y un viernes de lluvia

Desde que Anthropic lanzó Opus 5.5, medio mundo está creando «vídeos» hechos solo con código. Yo quería probarlo, pero comparándolo con las herramientas que ya uso a diario: OpenCode 2, Antigravity CLI y la app de Gemini. Así que me suscribí al plan Pro de Claude y le di a todos el mismo prompt.

☔

Esto no es un benchmark. Es una prueba rápida, informal y nada rigurosa, hecha un viernes de alerta meteorológica por fuertes lluvias en Castellón para obligarme a salir de mi zona de confort (Gemini y OpenCode) y probar Claude Code. Una sola ejecución por combinación, sin repeticiones, con mi criterio subjetivo y con tiempos y consumos anotados a ojo.

El prompt

Idéntico para todos, en español, sin más contexto:

Genera un video sobre la cronología de las 4 revoluciones industriales usando solo código (html, css, js). Estilo neobrutalista, incluye animaciones, transiciones, fundidos y todo tipo de efectos visuales propios de una producción educativa con una realización profesional. Añade una banda sonora de fondo sincronizada con las imágenes.

Los participantes

ModeloArnésTipoPromptsTiempoConsumo¿Se autoverificó en el navegador?Duración del vídeo
Claude Opus 5.5Claude CodeAgéntico122 min15 % límite 5 h · 2 % semanal (Pro)Sí, a fondo (capturas, consola, fps, análisis del audio)1:54
DeepSeek V4 Flash (max)OpenCode 2Agéntico1< 10 min (estimado)0,08 € (coste equivalente, plan OpenCode Go)Sí, con muchas autoiteraciones2:55
Gemini 3.8 Flash (high)Antigravity CLIAgéntico110 min11 % límite 5 h · 5 % semanalSí, con bastante detalle4:20
Gemini 3.1 Pro (high)Antigravity CLIAgéntico15 min3 % límite 5 h · 1 % semanalMínima: comprobó que cargaba y avanzaba0:31
Gemini 3.8 FlashApp de GeminiChat1——No (no puede)1:20
Gemini 3.8 Flash (razonamiento ampliado)App de GeminiChat1——No (no puede)1:15
Gemini 3.1 Pro (razonamiento ampliado)App de GeminiChat9——No (no puede)0:45 (v9)

Los consumos no son comparables entre sí: todas las herramientas se usaron con planes de suscripción, pero OpenCode Go informa del coste equivalente en euros y los demás, de porcentajes de sus propios límites. Antigravity tuvo problemas de timeout con el MCP de Chrome, sobre todo con 3.1 Pro (quizá por mi sistema). La app de Gemini no es un arnés agéntico: no puede ejecutar ni revisar lo que genera, así que iteré con 3.1 Pro hasta tener una versión completa para que la comparación tuviera sentido.

¿Y cuánto cuesta cada modelo por token?

Para una referencia homogénea, aquí están los precios por millón de tokens de los cinco modelos según OpenCode Zen, en un dashboard que mantengo. Ojo: son precios de referencia, no lo que costó esta prueba, que se hizo con planes de suscripción. Gemini 3.1 Pro aparece dos veces porque tiene dos tramos de precio según el tamaño del contexto (hasta 200K tokens y más), no porque sean dos modelos distintos.

💶 Ver precios por token

Los resultados

Cada ficha incluye la grabación y un enlace a la versión ejecutable original, sin tocar. Las grabaciones son capturas en tiempo real de la pestaña de Chrome (más detalles en cómo se grabaron).

Claude Opus 5.5

Claude Code
1:541 prompt22 min5 archivos · ~1.200 líneas0 errores JS
  • Animación con SVG, DOM y Web Animations API, controlada por el reloj del audio: se puede pausar y saltar sin perder la sincronía.
  • Banda sonora sintetizada con Web Audio a 120 BPM; los cortes de escena caen en tiempos fuertes y los efectos (golpes, barridos, «pops») salen de la misma línea de tiempo que las animaciones.
  • Se probó en Chrome por su cuenta: detectó que generar el audio tardaba 78 s y lo bajó a 4,5 s, y corrigió tres fallos de maquetación.

Mi valoración: La más sofisticada del conjunto; la de DeepSeek, justo detrás.

DeepSeek V4 Flash (max)

OpenCode 2
2:551 prompt< 10 min0,08 € equivalentes0 errores JS
  • Capítulos con portadilla de color, fichas de hitos, cifras destacadas, rótulo «REC» con código de tiempo, titulares en movimiento y créditos finales.
  • Animaciones con CSS (35 @keyframes) y canvas; audio con Web Audio. Incluye un README.
  • El coste más bajo con diferencia y una autoverificación en el navegador muy activa.

Mi valoración: Me gusta mucho: tras la de Claude, la más sofisticada, y con una relación calidad/precio increíble. Pegas: algunos títulos de color se confunden con el fondo y el audio tiene poco impacto, es un poco ñoño.

Gemini 3.8 Flash (high)

Antigravity CLI
4:201 prompt10 min6 módulos JS · ~3.600 líneasNarración con voz
  • El más ambicioso: seis actos (incluidos un prólogo preindustrial y un epílogo), motor gráfico en canvas, banda sonora procedural y una matriz comparativa.
  • Única versión con narración en off: usa la voz del sistema operativo (speechSynthesis), activable con un botón.
  • Más que un vídeo es una página: reproductor arriba y fichas informativas debajo. La grabación la muestra entera, a su proporción real, y con el audio de todo el sistema para incluir la voz.

Mi valoración: Excesivamente verbosa en su interfaz: muestra detalles que no le interesan al espectador (la «estética neobrutalista», elementos irrelevantes del HUD…). Parece más una demo de lo bien que Gemini hace frontend que un vídeo educativo. La narración, eso sí, es un acierto.

Gemini 3.1 Pro (high)

Antigravity CLI
0:311 prompt5 min3 archivos · ~365 líneas4 errores JS
  • El más breve y sencillo: una tarjeta por revolución sobre fondos de color, con iconos emoji y rótulo final.
  • Lanza errores en la consola al programar curvas de volumen que se solapan (setValueCurveAtTime). En la cuarta tarjeta el texto se monta sobre el icono.
  • Solo comprobó que la página cargaba, arrancaba y avanzaba; Antigravity tuvo problemas de timeout con el MCP de Chrome.

Mi valoración: El audio es horroroso: claramente está roto (cuadra con los errores de la consola).

Gemini 3.8 Flash

App de Gemini
1:201 promptSin autoverificación0 errores JS
  • Estética oscura y técnica, menos neobrutalista que el resto, con ilustraciones esquemáticas en canvas y titulares en movimiento.
  • Tailwind por CDN y audio con Web Audio («dual-osc stereo engine»). Reproductor con capítulos dentro de una página más larga.

Mi valoración: Le pasa algo parecido a la de Antigravity, aunque menos: pegatinas como «AUDIO SYNTH: DUAL-OSC STEREO ENGINE» no tienen nada que ver con la finalidad educativa.

Gemini 3.8 Flash (razonamiento ampliado)

App de Gemini
1:151 promptSin autoverificación0 errores JS
  • Muy neobrutalista: un color por fase, fichas de tecnología, energía y sociedad, subtítulos de «narrador» y una matriz comparativa final.
  • Usa la librería Tone.js (por CDN) para la música, y Tailwind para los estilos.

Mi valoración: Misma reflexión: adornos como «60 FPS // UHD MASTER» sobran en un vídeo educativo.

Gemini 3.1 Pro (razonamiento ampliado) · v9

App de Gemini
0:459 promptsSin autoverificación0 errores JS
  • Versión final tras ocho iteraciones: tarjetas por revolución con iconos animados y pantalla final. Aunque, visto después, la mejor de la serie era la v4, que no arrancaba.
  • La música es un MP3 externo (SoundHelix-Song-2.mp3, de soundhelix.com) que suena en bucle: no está generada por código ni sincronizada con las imágenes. Ver la saga.

La saga de Gemini 3.1 Pro en la app: 9 versiones

Como la app de Gemini no puede probar lo que genera, cada versión es el resultado de un nuevo prompt mío describiendo lo que fallaba. Las publico todas, también las que no funcionan, porque la evolución (y sus regresiones) es parte del resultado.

v1Sin texto ni animaciones

Solo se ven fondos de color que cambian. La música, que me pareció excelente, es el MP3 externo de SoundHelix.

v2Sin texto ni animaciones

Mismo síntoma que la v1.

v3Sin texto ni animaciones

Aparecen botones de pausa y avance, pero el contenido sigue sin verse.

v4La mejor de la serie… pero no arranca

Para mí, paradójicamente, la mejor de las nueve: las pequeñas animaciones junto al texto explicativo de cada escena son las más logradas, y genera su propia música con Web Audio. Pero el botón de inicio queda tapado por otro elemento y no responde al clic, así que la di por mala. Para grabarla hubo que arrancarla por código, «haciendo un puente».

v5Usable, peor audio

Por fin se ve todo, pero sustituye el MP3 por música sintetizada con Web Audio, mucho más pobre a mi oído.

v6Intento de arreglar el audio

Apenas cambia: mejora un poco la secuencia de inicio.

v7Vuelve el buen audio, se van las animaciones

Recupera el MP3 de SoundHelix con un diseño distinto, pero pierde las pequeñas animaciones de cada secuencia.

v8Sin cambios

Nuevo prompt para recuperar las animaciones; el resultado es prácticamente idéntico a la v7.

v9Versión final

Combina lo visual de la v5/v6 con el MP3 de SoundHelix. Es la que uso para la comparativa.

Lo que he visto

Verse a sí mismo importa

Los arneses agénticos pudieron abrir el navegador y revisar su trabajo. Las versiones que más se revisaron son también las más completas y sin errores; la que apenas se revisó (3.1 Pro en Antigravity) llegó con errores visibles en la consola.

«Solo código»… salvo la música

Seis de las nueve versiones de 3.1 Pro en la app tiran de un MP3 externo de soundhelix.com. Justo las que sonaban mejor. Las que generaban el audio con código (v4–v6) eran las que sonaban peor.

Sincronizar no es sonar a la vez

El prompt pedía una banda sonora sincronizada con las imágenes. Un MP3 en bucle no puede estarlo. Generar el audio con código permite atar los cortes a la música, pero no todas las versiones lo aprovechan igual.

La mejor versión estaba escondida

La v4 de Gemini 3.1 Pro en la app, que di por mala, resultó ser la mejor de la serie. Solo fallaba una cosa: un elemento tapaba el botón de inicio. Cualquier prueba en un navegador lo habría detectado en segundos; sin esa prueba, seguí iterando cinco versiones más.

A Gemini 3.8 Flash le gusta exhibirse

Sus tres versiones llenan la pantalla de cosas que nadie pidió: «60 FPS // UHD MASTER», «AUDIO SYNTH: DUAL-OSC STEREO ENGINE», rótulos sobre su propia estética… Parecen más una demostración de lo que sabe hacer en frontend que un vídeo para aprender. Hay que atarlo en corto en el prompt.

Iterar a ciegas tiene regresiones

Sin poder probar el resultado, cada versión de la app reescribía el archivo entero: arreglar el audio rompía las animaciones y viceversa (v5, v7). Hicieron falta 9 prompts.

¿Qué es un «vídeo»?

Unos entendieron un reproductor a pantalla completa; otros, una página con el reproductor arriba y fichas debajo. Gemini 3.8 Flash en Antigravity fue el único que añadió narración con voz.

Coste y tiempo

DeepSeek V4 Flash lo hizo por el equivalente a 0,08 € (dentro del plan OpenCode Go). Claude tardó más (22 min) porque se dedicó a probar, medir y corregir. Las cifras no son comparables entre sí, pero el contraste es llamativo.

¿Y cuánto ha costado todo esto con Claude?

Me suscribí al plan Pro de Claude el mismo día de la prueba y era la primera vez que usaba Claude Code: las propias estadísticas lo delatan (una sesión, un día activo). Generar el vídeo de la prueba fueron 22 minutos y un 2 % de mi límite semanal. Pero la jornada no acabó ahí: con Claude Code también analicé las demás versiones, grabé tres tandas de vídeos (corrigiendo recortes, la voz y las portadas), monté este sitio y lo publiqué en GitHub. Todo eso supuso alrededor de un 7 % más. Estas son las estadísticas de toda la jornada:

~5 hde sesión (5 h 7 min)
9 %del límite semanal del plan Pro (2 % el vídeo + 7 % el resto)
185 Mtokens, el 99 % leídos de caché
≈ 63 $coste equivalente a precio de API
Estadísticas de Claude Code: sesión de 5 h 7 min y 185,2 millones de tokens
Stats: toda la jornada, mi primer día con Claude Code («Sessions: 1», «Active days: 1/1»). 185,2 M tokens: 800,7 k de salida y 183,2 M leídos de caché.
Panel de uso de Claude Code: 22,81 $ desde el último arranque y 9 % del límite semanal
Usage: al terminar el vídeo de la prueba salí de Claude Code e inicié una conversación nueva para montar todo lo demás. El bloque «Session» (22,81 $, 2 h 53 min) solo cuenta esa segunda conversación; por eso es menor que el total. El 9 % semanal sí recoge toda la jornada.

El coste equivalente es una estimación con los precios por token de Opus 5.5 (4 $ entrada, 20 $ salida, 0,20 $ lectura de caché y 8 $ escritura de caché a 1 h, por millón): aplicados a la sesión parcial, dan exactamente los 22,76 $ que muestra Claude Code. Yo no he pagado eso: todo entra en la suscripción Pro. Dos curiosidades del panel: el 92 % del uso se hizo con más de 150 k tokens de contexto (las sesiones largas encarecen cada petición) y el 14 % vino de las capturas y consultas al navegador mediante el MCP de Chrome DevTools.

Cómo se grabaron los vídeos

Cada versión se abrió en Google Chrome 154, se mostró su pantalla de bienvenida durante unos 2 segundos, se pulsó su botón de inicio y se grabó la propia pestaña (imagen y sonido) con la API de captura de pestaña y MediaRecorder, a unos 26–30 fps. Después se convirtió a MP4 con ffmpeg. Al ser una captura en tiempo real, la fluidez de cada vídeo refleja también su rendimiento en el navegador.

La mayoría se grabaron con una ventana de 1280×720. Las tres versiones de Gemini 3.8 Flash (las dos de la app y la de Antigravity) son páginas más altas, con el reproductor arriba y fichas informativas debajo, así que se grabaron enteras a su proporción real (1280×1114, 1280×1132 y 1280×1330), sin recortar.

La narración en off de Gemini 3.8 Flash en Antigravity usa la síntesis de voz del navegador (speechSynthesis, con las voces de Google de Chrome), que no pasa por el audio de la pestaña. Para incluirla, esa versión se grabó con el audio de todo el sistema y se sincronizó con la imagen comparando la música presente en ambas pistas.

Transparencia: las grabaciones, este sitio y su análisis técnico los ha preparado Claude Code (Opus 5.5) a petición mía, es decir, uno de los participantes. Los hechos técnicos (librerías usadas, origen del audio, duración) son comprobables en el código de cada versión; las valoraciones son mías.

El código de todas las versiones, las grabaciones y este sitio están en el repositorio de GitHub.

In English, briefly

Since Anthropic released Opus 5.5, everyone seems to be making "videos" with nothing but code. On a rainy Friday (a heavy-rain weather alert in Castellón, Spain) I subscribed to Claude Pro and ran a quick, informal and non-rigorous test: the very same Spanish prompt — a timeline of the four industrial revolutions, neo-brutalist style, professional-looking transitions and effects, and a soundtrack synchronized with the images, using only HTML, CSS and JS — in seven model/harness combinations: Claude Opus 5.5 in Claude Code, DeepSeek V4 Flash in OpenCode 2, Gemini 3.8 Flash and 3.1 Pro in Antigravity CLI, and three Gemini models in the Gemini web app.

One run each, no repetitions, subjective judgement. Agentic harnesses could open a browser and check their own work; the Gemini app could not, so I iterated nine times with 3.1 Pro to get a working version. Every result is published here, untouched and runnable, with a screen recording.

What I saw: the agentic harnesses that checked their own output in a browser produced the most complete results; the one that barely checked (Gemini 3.1 Pro in Antigravity) shipped with console errors. DeepSeek V4 Flash did it for €0.08. Gemini 3.8 Flash in Antigravity was the only one to add a voice-over. And in the Gemini app, the "excellent soundtrack" of six of the nine Gemini 3.1 Pro versions turned out to be an external MP3 from soundhelix.com — neither code-generated nor synchronized — while the versions that synthesized audio in code sounded worse. Ironically, the best of the nine (v4) looked broken only because an overlapping element blocked its start button — something any browser check would have caught in seconds. My own take: Claude's was the most polished, with DeepSeek's close behind at an unbeatable price; Gemini 3.8 Flash tends to show off with HUD stickers nobody asked for ("60 FPS // UHD MASTER"), and Gemini 3.1 Pro's audio in Antigravity was simply broken.