Una web animada premium puede cambiar por completo la percepción de una marca, un producto o una campaña. No porque tenga movimiento por tenerlo, sino porque la animación transforma el scroll en una experiencia con ritmo, narrativa y dirección visual.
Durante mucho tiempo, hacer algo así implicaba un equipo de diseño, motion graphics, desarrollo frontend y bastante tiempo de producción. Hoy podemos construir una experiencia de alto impacto conectando referencias, generación de imágenes, video con inteligencia artificial, código y una buena dirección creativa.
El objetivo de este proyecto fue crear una web conceptual para unos lentes de natación de alto rendimiento. La idea era simple: comenzar en la superficie, hacer que una nadadora descienda a medida que se avanza por la página y convertir el recorrido hacia el fondo de la piscina en la presentación del producto.
El resultado no depende de una única herramienta mágica. Depende del flujo: partir bien, generar recursos consistentes, dividir la animación en partes manejables, sincronizarla con el scroll y mantener una dirección visual clara de principio a fin.
Tabla de contenido
- 🏊 La idea: convertir una landing page en una experiencia
- 🔎 Parte desde una referencia, no desde una pantalla vacía
- 🎨 Define una dirección visual antes de construir
- 🧪 Revisa la web estática antes de animar
- 🎬 Genera el video por tramos, no intentes resolver todo de una vez
- 🖼️ Convierte el video en frames y sincronízalo con el scroll
- 📐 Haz que el contenido responda a lo que ocurre en pantalla
- ✨ Limpia el diseño cuando los efectos empiezan a competir con la imagen
- 🚀 Publica la web para convertir el experimento en un proyecto real
- 🧠 El flujo completo para crear webs animadas premium con IA
- 🛠️ Herramientas, recursos y siguientes pasos
- 🌊 Lo más importante no es la herramienta, es la conexión entre diseño, IA y código
🏊 La idea: convertir una landing page en una experiencia
Antes de abrir cualquier herramienta, conviene definir qué debe sentir una persona al recorrer la web. En este caso, no quería una página típica con un hero, tres tarjetas de características y un botón. Quería que la propia interacción comunicara el concepto de los lentes.
La narrativa se construyó así:
- La nadadora emerge en la superficie y se presenta el producto.
- Al avanzar por la página, la nadadora empieza a descender.
- En los momentos intermedios aparecen beneficios y características de los lentes.
- Al final, la nadadora llega al fondo de la piscina.
- La interfaz acompaña el descenso con un indicador de profundidad desde 0 hasta menos 5 metros.
Eso hace que el contenido no parezca colocado encima de una imagen aleatoria. Todo se relaciona. El fondo, el movimiento, el texto, la profundidad y el producto forman parte de una misma idea.
Este tipo de enfoque funciona especialmente bien para:
- Lanzamientos de producto.
- Landing pages de campañas.
- Marcas donde la estética tiene mucho peso.
- Presentaciones creativas para clientes.
- Portafolios de diseño, dirección de arte o desarrollo.
- Productos tecnológicos, deportivos, moda, automoción o experiencias premium.
No todas las webs necesitan este nivel de producción. Para un negocio local, una página clara que explique servicios, genere confianza y facilite el contacto suele ser mucho más útil. Pero cuando una marca necesita ser recordada, una experiencia animada bien ejecutada puede marcar una diferencia enorme.
🔎 Parte desde una referencia, no desde una pantalla vacía
Una de las formas más rápidas de acelerar un proyecto creativo es evitar empezar de cero. En vez de pedirle a una IA que invente una imagen completamente desde la nada, uso referencias para definir composición, iluminación, pose, atmósfera y dirección general.
Para este proyecto, el primer paso fue buscar imágenes de lentes de natación en Pinterest. La búsqueda no tenía como objetivo copiar una imagen, sino encontrar un punto de partida visual. Cuando aparece una imagen más o menos cercana a lo que tienes en mente, Pinterest suele mostrar otras referencias similares, lo que permite explorar rápidamente distintas poses, ángulos, colores y estilos de fotografía.
La referencia elegida ayudó a definir varios elementos:
- Un retrato cercano de una nadadora saliendo del agua.
- Los lentes como producto principal de la composición.
- Una atmósfera acuática intensa.
- Una iluminación cinematográfica.
- Espacio suficiente para incorporar texto en la web.
La referencia no tiene que ser el resultado final. De hecho, mientras mejor entiendas qué te sirve de esa imagen, más fácil será alejarte de ella y crear algo original. Puedes tomar la pose de una, la luz de otra, la paleta de una tercera y el encuadre de una cuarta.
Qué pedir al generar la primera imagen
Con la referencia lista, utilicé ChatGPT para generar una imagen base. El prompt inicial definía con bastante claridad el encuadre y la intención:
- Una fotografía inspirada en la imagen de referencia.
- Una nadadora emergiendo del agua.
- Un primer plano con el rostro como foco.
- Lentes de natación premium y visualmente atractivos.
- Formato horizontal 16:9.
- Estilo realista y cinematográfico.
- Sin mostrar el cuerpo completo, porque el foco debía estar en el rostro y el producto.
La primera generación era funcional, pero los lentes todavía no tenían suficiente presencia. En vez de descartar toda la dirección, ajusté la solicitud: más color, gorra bicolor, un plano un poco más abierto, una composición más cinematográfica y la nadadora ubicada hacia la derecha.
Después afiné nuevamente la pose. La idea era evitar que apareciera de perfil y lograr una posición más frontal, con una pequeña inclinación hacia atrás. Esa iteración terminó siendo mucho más útil como hero principal.
La lección es sencilla: no esperes que la primera imagen sea perfecta. Usa cada resultado como una conversación visual. Mira qué funciona, identifica qué sobra y pide un cambio puntual.
🎨 Define una dirección visual antes de construir
Una web puede tener buenos recursos visuales y aun así sentirse desordenada si cada sección parece venir de un proyecto distinto. Por eso, antes de generar la interfaz, definí una dirección visual clara.
Para encontrarla, usé Dynamo Sites. Para mí, esta herramienta funciona como una biblioteca de puntos de partida visuales. Puedes recorrer propuestas, encontrar una composición, una combinación tipográfica o una estructura que tenga sentido y luego adaptar el prompt a tu propio concepto.
En este caso encontré una dirección que tenía:
- Tipografías modernas y editoriales.
- Una composición limpia.
- Mucho espacio negativo.
- Texto grande, claro y con jerarquía.
- Un enfoque visual que dejaba respirar a la imagen.
Copié la base del prompt y la llevé a Antigravity, pero no la usé tal cual. La adapté al proyecto de los lentes de natación y le entregué también la imagen que acababa de generar. La instrucción era concreta: crear una sección hero muy visual, con el contenido hacia la izquierda y con espacio suficiente para que la nadadora tuviera protagonismo.
También incluí restricciones importantes. Cuando no las aclaramos, los agentes suelen añadir tarjetas, efectos glow, bloques decorativos y recursos visuales que quizás se ven modernos, pero que no aportan a la experiencia. Para este proyecto quería evitar exactamente eso.
Una instrucción útil puede ser:
- Usa una composición limpia y editorial.
- Evita tarjetas innecesarias.
- No agregues halos, brillos o decoraciones genéricas.
- Mantén el foco en la imagen y el producto.
- Usa una jerarquía tipográfica fuerte.
- Respeta el espacio negativo para mejorar la lectura.
La clave está en tratar la dirección visual como un sistema. No como una captura bonita que aparece solamente en la primera sección.
🧪 Revisa la web estática antes de animar
Este paso parece obvio, pero se suele saltar demasiado rápido. Antes de pensar en video, scroll sincronizado o efectos complejos, revisé si la web funcionaba con la imagen fija.
Es una regla bastante simple: si una composición se ve mal quieta, el movimiento no la va a arreglar mágicamente.
La animación puede amplificar una buena dirección, pero no arregla una jerarquía pobre, un texto ilegible, una imagen mal ubicada o una interfaz llena de elementos sin sentido.
Antes de continuar, conviene validar:
- ¿La imagen principal tiene suficiente protagonismo?
- ¿El texto se lee sobre el fondo?
- ¿La composición se entiende sin movimiento?
- ¿El botón principal aparece donde debe estar?
- ¿Las fuentes, colores y espaciados se sienten coherentes?
- ¿El diseño ya comunica la idea del producto?
En este caso, la versión estática funcionaba. La imagen estaba a la derecha, el contenido vivía a la izquierda y la composición dejaba claro que los lentes eran el foco. Recién ahí tenía sentido pasar a la animación.
🎬 Genera el video por tramos, no intentes resolver todo de una vez
El siguiente paso fue animar la imagen hero. La idea era comenzar exactamente desde la imagen de la nadadora emergiendo y hacer que descendiera hacia el fondo de la piscina.
Antes de enviar el recurso a un modelo de video, le pedí a Antigravity que me ayudara a preparar el prompt. Esto es útil porque el agente ya conoce el proyecto, la imagen de inicio y el papel que debe cumplir la animación dentro de la web.
La solicitud tenía varios objetivos:
- Usar la imagen existente como primer fotograma.
- Hacer que la nadadora descendiera en una piscina profunda.
- Permitir que, al retroceder por la página, pareciera que vuelve a subir hacia la superficie.
- Acercar la cámara a los lentes a mitad del recorrido.
- Reservar esa parte para mostrar características del producto.
- Mantener consistentes la apariencia de la nadadora y los lentes.
- Evitar cualquier interfaz dentro del video.
- Conservar una estética cinematográfica.
Con el prompt refinado, generé el primer video en Veo 3.1 Fast, a 1080p, en 16:9, con una duración de 8 segundos y sin audio.
El detalle importante es que una generación de video con IA rara vez sale perfecta a la primera. Incluso usando exactamente el mismo prompt, dos resultados pueden ser muy distintos. Por eso prefiero hacer varias generaciones y elegir la mejor, en vez de pasar demasiado tiempo intentando arreglar una única toma que no convence.
El modelo interpretó bastante bien el descenso, aunque el acercamiento lateral a los lentes no quedó exactamente como lo había imaginado. Esto es normal. La IA puede seguir una dirección general con buenos resultados, pero los movimientos muy específicos todavía requieren iteración, selección y, muchas veces, simplificar la expectativa.
La estrategia más útil: construir clips conectados
Ocho segundos no alcanzaban para llegar al fondo de la piscina con el ritmo que quería. La solución no fue generar una animación gigantesca de una sola vez. En lugar de eso, dividí el recorrido.
Primero tomé el final del primer video como referencia de continuidad. Después generé una nueva imagen de la nadadora ya en profundidad, cuerpo completo y en posición vertical, como si la cámara estuviera dentro de la piscina junto a ella.
La primera imagen de profundidad no tenía la perspectiva adecuada, así que fue necesario aclarar mejor la solicitud:
- La nadadora debía estar abajo.
- La cámara debía sentirse ubicada a su misma profundidad.
- Debía aparecer el cuerpo completo.
- La posición tenía que ser vertical.
- El resultado debía mantener la estética cinematográfica del primer tramo.
Con esa imagen final creada, pedí a Antigravity que extrajera el último frame del primer video. Luego utilicé Gemini con las dos referencias: el último frame del primer tramo y la imagen del fondo. El objetivo era generar una transición natural entre ambos puntos.
Este enfoque cambia completamente el trabajo con video generado por IA. En vez de pedir una escena eterna y perfecta, puedes construirla como una cadena de piezas:
- Genera un primer tramo corto.
- Extrae su último frame.
- Crea o ajusta el siguiente estado visual.
- Genera una transición entre ambas imágenes.
- Une las secuencias dentro de la web.
- Reemplaza solo el tramo que no funcione.
Eso reduce muchísimo el riesgo. Si un segmento falla, no hay que rehacer el proyecto completo. Solo vuelves a generar esa parte.
🖼️ Convierte el video en frames y sincronízalo con el scroll
Esta es una de las partes más interesantes del flujo. En vez de insertar un video tradicional y tratar de controlarlo con el scroll, Antigravity tomó el video y lo convirtió en una secuencia de imágenes.
El primer clip de 8 segundos se transformó en 192 frames. Después, esos frames se muestran dentro de un canvas según la posición de scroll de la página.
Esto permite algo mucho más preciso que reproducir un video convencional:
- Al avanzar por la página, la nadadora desciende.
- Al volver hacia arriba, la nadadora regresa a la superficie.
- Si se detiene el scroll, la animación queda detenida exactamente en ese punto.
- El movimiento se puede suavizar mediante interpolación entre frames.
- El contenido puede aparecer en sincronía con momentos específicos de la secuencia.
En otras palabras, el scroll deja de ser solo navegación. Se convierte en el controlador de la animación.
Este método es especialmente potente cuando la animación debe responder de forma bidireccional. Un video normal puede avanzar, pausarse o retroceder, pero controlar su tiempo de reproducción con scroll de manera fluida suele ser más frágil. Con una secuencia de frames, cada posición del recorrido corresponde a un estado visual concreto.
Después de generar el segundo clip, repetí el proceso: guardar el video dentro de los assets del proyecto, pedir que se transformara en secuencia y extender la web con nuevas secciones que siguieran la misma dirección visual inicial.
El resultado fue un recorrido continuo: superficie, descenso, beneficios de producto y profundidad. El contenido no interrumpe la experiencia, la acompaña.
📐 Haz que el contenido responda a lo que ocurre en pantalla
Una web animada no se trata solo de mover un fondo. La interfaz también debe tener una relación directa con el momento de la historia.
En la parte superior, el hero presenta la promesa principal: “Claridad absoluta en el agua”. Cuando la nadadora empieza a descender, la página puede introducir mensajes relacionados con la óptica, la hidrodinámica, la precisión visual o la concentración. Más abajo, el contenido cambia para conectar con la calma y la profundidad.
El indicador de profundidad es un buen ejemplo de microinteracción con sentido. Comienza en cero y avanza hacia menos 5 metros mientras la nadadora baja. No es un elemento decorativo. Ayuda a reforzar la narrativa.
Al diseñar este tipo de páginas, pregúntate siempre:
- ¿Qué está ocurriendo visualmente en este punto?
- ¿Qué mensaje tiene más sentido justo ahora?
- ¿La interfaz amplifica el concepto o distrae?
- ¿Este dato, número o indicador aporta contexto a la escena?
- ¿El producto aparece cuando tiene más impacto?
Si el fondo muestra una inmersión profunda, el texto sobre precisión, silencio o concentración tiene más fuerza que un bloque genérico de características. Es una diferencia pequeña en teoría, pero enorme en la sensación final.
✨ Limpia el diseño cuando los efectos empiezan a competir con la imagen
La primera versión incluía degradados oscuros detrás del texto. Funcionaban: mejoraban la legibilidad sobre las zonas claras del video. Pero también tapaban demasiado la imagen y reducían esa sensación inmersiva del agua.
Cuando algo así ocurre, no hace falta destruir la versión anterior. Lo más seguro es clonar el proyecto o, como mínimo, duplicar el archivo principal antes de probar una dirección distinta.
Le pedí a Antigravity que clonara el index.html y creara una alternativa sin overlays oscuros, usando texto blanco. La hipótesis era que el azul profundo de las secuencias y el blanco proporcionarían contraste suficiente.
La nueva variante terminó funcionando mejor. Se eliminaron los degradados y se mantuvo una sombra muy suave en el texto para conservar la lectura cuando el fondo se volvía más brillante. Es un detalle casi invisible, pero cumple la función sin destruir la imagen.
Esta es una buena regla para interfaces visuales:
Si un efecto existe solo para proteger el texto, intenta resolver la legibilidad con tipografía, ubicación, contraste y una sombra sutil antes de cubrir toda la imagen con una capa oscura.
Muchas veces la mejor mejora visual consiste en quitar algo.
🚀 Publica la web para convertir el experimento en un proyecto real
Una vez que la web estaba lista de forma local, faltaba algo importante: publicarla. Un proyecto que vive solo en tu computador no se puede compartir fácilmente con un cliente, añadir a un portafolio ni enviar para recibir feedback.
Para dejarla online utilicé Hostinger. El proceso fue directo:
- Crear un nuevo sitio HTML desde el panel.
- Abrir el administrador de archivos.
- Subir el archivo index.html.
- Subir la carpeta de frames.
- Subir los videos, imágenes y demás archivos necesarios.
- Abrir el dominio temporal para comprobar que todo cargara correctamente.
Como la experiencia depende de muchos frames, es importante mantener una estructura de carpetas ordenada. Si la página busca las imágenes en una ruta concreta, esa misma ruta tiene que existir en el hosting.
Si quieres publicar webs, landing pages o proyectos de portafolio, puedes usar mi enlace de Hostinger con descuento. Es una forma práctica de dejar tus proyectos online y compartirlos con un enlace real.
🧠 El flujo completo para crear webs animadas premium con IA
Todo el proceso se puede resumir en una secuencia clara y reutilizable. No importa si cambias ChatGPT, Gemini, Veo, Antigravity o cualquier otra herramienta. Lo importante es entender cómo se conectan las piezas.
- Define el concepto: antes de crear recursos, decide qué historia debe contar la página.
- Busca referencias: usa imágenes para orientar composición, luz, atmósfera y producto.
- Genera una imagen hero: crea una pieza visual fuerte que funcione incluso sin movimiento.
- Encuentra una dirección visual: parte desde una base coherente, como las propuestas de Dynamo Sites, y adáptala.
- Construye el hero estático: valida jerarquía, tipografía, espacio y legibilidad.
- Prepara el prompt de video: define el primer frame, el movimiento, la cámara y la consistencia visual.
- Genera varias alternativas: compara resultados en lugar de obsesionarte con una sola generación.
- Divide animaciones largas: crea clips breves y usa el último frame como puente hacia el siguiente tramo.
- Convierte clips en frames: usa una secuencia de imágenes para controlar el movimiento con scroll.
- Sincroniza contenido y escena: cada sección debe aparecer cuando tenga sentido narrativo.
- Clona antes de experimentar: conserva siempre una versión anterior funcional.
- Publica el resultado: transforma una prueba local en un enlace que puedas compartir.
🛠️ Herramientas, recursos y siguientes pasos
Este método no exige usar exactamente las mismas herramientas. Los modelos cambian rápido y siempre van apareciendo opciones nuevas. Lo importante es saber que puedes conectar una herramienta de imagen, una de video, un agente de código y un hosting dentro de un mismo flujo creativo.
Para empezar a crear interfaces y webs con una dirección visual potente, puedes explorar Dynamo Sites. Si necesitas prompts profesionales para estructurar una aplicación o convertir una idea en una especificación más clara, tienes Primera App.
Si quieres aprender más sobre vibe coding, creación de aplicaciones y proyectos con inteligencia artificial, puedes unirte a la comunidad de Vibe Coding.
Y si tienes una idea concreta, una marca o un proyecto donde quieras aplicar este tipo de experiencia visual, puedes enviar una solicitud para trabajar juntos.
🌊 Lo más importante no es la herramienta, es la conexión entre diseño, IA y código
La parte más valiosa de este flujo no es haber generado una nadadora, un video submarino o una landing page con scroll. Es entender que ya no necesitamos resolver una experiencia visual compleja en un único paso.
Podemos diseñar una dirección, crear un primer recurso, probarlo dentro de una interfaz, animarlo por partes, corregir solo los segmentos necesarios y publicar el resultado sin tener que reconstruir todo cada vez.
Eso abre muchas posibilidades. No solo para crear páginas visualmente atractivas, sino para trabajar de forma más rápida, más flexible y más intencional.
Una web cinematográfica premium no empieza con código. Empieza con una idea clara. Después, cada herramienta se convierte en una pieza para llevar esa idea a algo que se pueda recorrer, sentir y compartir.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.