Le das a Claude la dirección de tu web y te devuelve un vídeo animado de 14 segundos, con tus textos, tus colores y tus botones de verdad. Sin After Effects y sin saber de vídeo.
Este es el que salió con diariovida.com:
Qué necesitas
- Claude de pago: con el plan básico vale. El prompt se usa en Claude Code, que es Claude trabajando dentro de tu ordenador.
- ¿Sin Claude? También funciona con Codex (incluido en ChatGPT de pago) y posiblemente con Gemini CLI (tiene nivel gratuito con tu cuenta de Google), aunque ese no lo he probado.
- Una web tuya o de la que tengas permiso.
- Una canción con licencia, si quieres música. Si no, pon «ninguna» y sonarán solo los clics.
Cómo se usa
- Crea una carpeta vacía y abre Claude Code en ella.
- Copia el prompt de abajo y rellena los cuatro huecos entre corchetes: tu web, la canción, el formato y si quieres ver el plan antes.
- Envíalo. El vídeo aparece en la carpeta como motion-video.mp4.
El prompt
<papel>Eres diseñador de motion y desarrollador creativo. Conviertes una web real en un vídeo animado hecho solo con código: una única forma que se va transformando en los componentes reales de la web, al ritmo de una canción, guiada por un cursor. Revisas tus propios fotogramas antes de dar nada por terminado.</papel>
<datos>
Web: [https://tu-web.com]
Canción: [ruta a un MP3 de unos 120 BPM, con licencia para uso comercial / ninguna]
Formato: [bucle de 14 segundos, 1440x1440 / recorrido de 42 segundos por la página en orden, 1440x1440]
Enséñame el plan antes de construir: [sí / no, constrúyelo]
</datos>
<direccion>
Una sola forma, sin cortes. Cada estado es el mismo elemento cambiando de tamaño, de radio de esquina y de color, mientras su contenido se sustituye con un desenfoque corto. Un cursor provoca cada cambio con clics, pasos por encima y arrastres reales. La cámara se acerca para que cada estado llene el encuadre. Usa los componentes, los textos, los colores y la tipografía de la propia web. Muelles en todo, como mucho un rebote mínimo. En un bucle, el último fotograma es el primero.
Prohibido: rebotes exagerados, explosiones de partículas, brillos, degradados en la interfaz, cortes, textos inventados.
</direccion>
<proceso>
1. Preparación. En esta carpeta, comprueba que hay Node con Playwright y Chromium, Python 3 con numpy y scipy, y ffmpeg. Instala lo que falte, siempre dentro de esta carpeta. Si Node es anterior a la 20, instala una versión de Playwright que lo admita (la 1.60 funciona con Node 18).
2. Captura. Abre la web con Playwright a 1440 px de ancho. Baja hasta el final poco a poco, porque hay secciones que solo se pintan al llegar a ellas. Haz captura de cada sección y de cada estado de cada parte interactiva que EXISTA de verdad. Copia todo el texto tal cual en copy.json. Saca los colores de los píxeles de las capturas, no de las variables CSS. Apunta las fuentes. Escribe INVENTORY.md con cada componente: medidas, texto real, qué hace al tocarlo y cómo podría convertirse en él la forma única. Marca cualquier número que parezca de ejemplo y déjalo fuera.
3. Plan. Elige de 8 a 12 componentes que enseñen lo que hace la web, ordenados para que cada uno nazca del anterior. En cada cambio, nombra un elemento compartido que pase de uno a otro (una barra de progreso se convierte en la de volumen, un botón se queda como botón del formulario). Si la web no tiene deslizadores, pestañas ni arrastres, no los inventes: usa los clics y los pasos por encima que sí tiene. Pon los estados sobre una rejilla de 120 BPM, un golpe cada 0,5 s (7 compases = 14 s, 21 compases = 42 s), con algo pasando en cada golpe. Guarda el plan en states.md. Si pedí ver el plan, para aquí y espera mi visto bueno.
4. Canción. Si hay canción, mídela con numpy: tempo por autocorrelación de la envolvente de ataques, compases fuertes por la energía de graves, y dónde empieza el bombo (al 10 % de su pico). Recórtala para que los bombos caigan en los golpes del vídeo, empezando en un compás fuerte. Si el tempo se aleja más de 1 BPM de 120, avísame antes de seguir. Sin canción, salta este paso.
5. Motor. Construye scene.html:
- seek(t) calcula todos los estilos solo a partir del tiempo t. Nada de transiciones ni animaciones CSS, temporizadores ni estado guardado entre fotogramas.
- Los muelles son respuestas a escalón en forma cerrada. Un valor que cambia de objetivo N veces es la suma de N respuestas.
- El truco del bucle (sumar cada escalón también en t + T para que el último fotograma empalme con el primero) aplícalo SOLO a los valores que cruzan de verdad el corte entre el final y el principio. En un elemento que cambia una sola vez, ese truco hace que la animación aparezca ya terminada antes de empezar.
- Amortiguación de 0,85 a 0,9. Los colores, con un muelle más rápido que la forma: si no, al pasar de un tono oscuro a uno vivo sale un color sucio a mitad de camino.
- Cada capa de texto o icono entra unos 70 ms después de que se mueva la forma y sale más rápido, con unos 3 px de desenfoque y una escala entre 0,965 y 1.
- El cursor se mueve sin arrancar en seco ni pasarse del objetivo. Botón pulsado 80 ms antes del golpe y suelta en el golpe.
- Contadores: no animes un número que sube si eso enseña cifras intermedias que no son reales.
- La cámara se acerca y se mueve en cada estado para que todo texto que haya que leer mida al menos 30 px en el encuadre. Si eso choca con que un párrafo necesita 4-6 s en pantalla, manda la legibilidad: quita el párrafo o un estado, no hagas la letra más pequeña.
- Expón window.seek, window.READY y window.SOUNDS (cada clic, tecla o tic con su tiempo).
- Nunca pongas will-change en algo que la cámara escala.
6. Revisión. Saca un fotograma por golpe en contact-sheet.png, más uno a mitad de cada transición, y míralos todos: fuera de la rejilla, apretado, cortado, demasiado pequeño, el cursor fuera de su objetivo, algo que aparece ya terminado. Comprueba que el salto del último fotograma al primero no es mayor que el paso normal entre dos fotogramas y que no hay errores en la consola. Arregla y repite hasta que todo esté limpio.
7. Render. Capturas de Playwright con el protocolo de Chrome, 4 subfotogramas por fotograma centrados en su tiempo, a ffmpeg: tmix=frames=4, quedarse con 1 de cada 4, H.264 a 60 fps, crf 12, yuv420p.
8. Sonido. Sintetiza con numpy clics de interfaz cortos y secos (ruido filtrado más un pitido breve), uno por evento de window.SOUNDS, colocados por su pico y muy por debajo de la música. Con canción, deja la mezcla a -14 LUFS con el pico real a -1,5 dBTP o menos (loudnorm de ffmpeg en dos pasadas). Sin canción, no fuerces los -14: unos clics sueltos no llegan sin aplastarlos. Basta con el pico a -1,5 dBTP. Mézclalo en AAC.
</proceso>
<entrega>motion-video.mp4 en esta carpeta, más contact-sheet.png y un informe corto: estados usados, BPM medido de la canción, las mediciones, el volumen y lo que dejaste fuera y por qué.</entrega>
<reglas>
- Solo textos, colores y datos reales. Si falta algo, dilo. Nunca te lo inventes.
- Nunca empieces el render completo sin que la hoja de revisión esté limpia.
- Si un cambio solo funciona como fundido, busca un elemento compartido.
- Solo webs, imágenes y música sobre las que tengas derechos.
</reglas>Lo que nadie te cuenta
- No sale a la primera. El mío tardó 14 minutos y la primera hoja de revisión salió con fallos. Lo detectó solo y lo arregló.
- Gasta uso de tu plan. No es para hacer diez al día.
- Revisa cada número. Si tu web tiene datos de ejemplo, el vídeo los enseña como si fueran reales.
- Anima pantallas, no personas. Para vídeos de cara a cámara no sirve.
El prompt original es una plantilla en inglés que circula por X (de @twoclipping, con una versión ampliada de Jens Heitmann). Esta versión está traducida y corregida tras probarla: arregla seis fallos, entre ellos animaciones que aparecían ya terminadas, colores sucios entre tonos y un volumen imposible sin música.
¿Qué web convertirías tú en vídeo? Cuéntamelo en los comentarios.