Una habitación con una gran ventana al océano. Peces, corales y reflejos al otro lado del cristal. Al bajar por la página, nos acercamos a la ventana, la atravesamos y entramos en el agua. Si volvemos a subir, el recorrido se invierte y regresamos a la habitación.
Esa es la idea de esta web: utilizar una misma escena para presentar el sitio y, después, convertirla en una experiencia controlada por el desplazamiento. Para construirla trabajo con Google Flow, Antigravity y una base de diseño de Dínamo Sites. Al final preparo dos versiones, reviso cómo se comportan en móvil y las publico en Hostinger.
Pero lo interesante no es solamente el resultado. También están los peces que aparecen donde no deberían, las capas de color que tapan demasiado y una secuencia que deja un espacio vacío enorme. Crear una web con IA también consiste en detectar esos problemas y saber pedir la siguiente corrección.
Tabla de contenido
- 🎯 Una web bonita y venderla por miles son cosas distintas
- 🖼️ Preparar una imagen que funcione como fondo web
- 🧩 Construir la portada con Dínamo Sites y Antigravity
- 🐠 Animar el fondo sin perder el control de la escena
- 🎨 Probar una alternativa clara sin perder la versión inicial
- 🎬 Crear el viaje desde la habitación hasta el océano
- 🖱️ Conectar la secuencia al desplazamiento de la página
- 🐚 Dar vida al resto de las secciones
- 🔧 Corregir recortes, espacios vacíos y fallos del scroll
- 🌊 Convertir la segunda versión en una alternativa azul y turquesa
- 📱 Afinar las portadas y revisar ambas versiones en móvil
- 🚀 Publicar la web en Hostinger
- 💡 Lo que realmente marca la diferencia al crear webs con IA
🎯 Una web bonita y venderla por miles son cosas distintas
Antes de empezar, quiero separar dos asuntos que suelen mezclarse. Seguramente te has encontrado con promesas de crear webs con inteligencia artificial y venderlas por 5.000 o 10.000 dólares.
Soy ingeniero de software y llevo más de quince años trabajando en este campo. Después de vender muchas webs, tengo bastante claro que crear una página visualmente atractiva y conseguir venderla por una cantidad determinada son cosas distintas.
A mí este proyecto me parece muy bonito. Tiene profundidad, movimiento y una dirección visual reconocible. Eso no significa que pueda prometerte cuánto vas a cobrar por hacer algo parecido.
Lo que sí puedo enseñarte es cómo trabajo: qué material preparo primero, cómo utilizo los prompts, qué reviso antes de continuar y cómo voy afinando el resultado. La IA ayuda mucho, pero las decisiones no desaparecen. Cambia la forma de ejecutarlas.
🖼️ Preparar una imagen que funcione como fondo web
El punto de partida es una imagen de referencia en Pinterest. Me gusta porque combina dos espacios que normalmente no vemos juntos: una habitación cálida, con cama y estanterías, y un océano lleno de vida justo detrás de una ventana.
Además de la idea, me interesa la composición. La ventana atrae la mirada hacia el centro, mientras los muebles aportan profundidad a los lados. Esa distribución puede funcionar bien con un título y un formulario encima.
El problema es el formato. La referencia es vertical y necesito utilizarla en una pantalla ancha. Si la estiro, deformo la habitación. Si la recorto para llenar todo el ancho, pierdo buena parte del espacio interior.
Y ese interior importa. Sin la cama, las estanterías y los laterales, la imagen podría convertirse simplemente en una vista del océano. Quiero que se entienda que estamos dentro de una habitación.
Ampliar la escena en Flow
En Flow selecciono el formato horizontal y subo la imagen de referencia. La instrucción busca conservar la escena y completar lo que falta a los lados:
Convierte esta imagen a formato horizontal y completa la habitación hacia los laterales. Mantén una estética cinematográfica y una calidad alta.
El resultado conserva la ventana en el centro y añade espacio alrededor. Ahora aparecen mejor las estanterías, la cama y el escritorio. Me gusta la mezcla de la madera con el azul del agua y decido continuar con esa imagen.
Aun así, no paso directamente a animarla. Primero quiero comprobar si funciona como diseño web. Una imagen puede ser espectacular por sí sola y no encajar cuando colocamos navegación, textos y controles encima.
🧩 Construir la portada con Dínamo Sites y Antigravity
Para la primera sección utilizo Dínamo Sites, mi biblioteca de diseños y prompts. Elijo una composición llamada Diario Asombro: un título grande, una combinación con cursivas y un formulario debajo.
No necesito conservar su fondo original. Lo que me interesa es la estructura. El bloque de instrucciones ya reúne decisiones sobre diseño, tipografías y recursos, así que no tengo que describir cada detalle desde cero.
Copio ese prompt en Antigravity y dejo que construya la sección. Cuando termina, le pido que la ejecute en localhost para abrirla en un servidor local y revisar el resultado.
La primera versión mantiene el fondo de la referencia de Dínamo. Ya están la navegación, el título y el formulario. Ahora adjunto la imagen horizontal generada en Flow y le indico que la utilice como fondo en lugar del video original.
Aquí se confirma si la composición funciona. La ventana queda detrás del título y todavía vemos la habitación a ambos lados. La ampliación nos permite llenar la pantalla sin reducir toda la escena al cristal central.
La cama y las estanterías siguen aportando contexto. El texto ocupa el centro, pero no elimina la sensación de profundidad. Con esta prueba estática ya tengo una base sobre la que merece la pena seguir trabajando.
🐠 Animar el fondo sin perder el control de la escena
Para la portada quiero movimiento en los peces, el agua y los reflejos, pero no en la cámara. El título y el formulario deben seguir siendo el punto de lectura, mientras el fondo aporta vida sin llevarnos a otro lugar.
La instrucción que preparo en Flow combina esas condiciones:
Anima los peces nadando, los corales y el agua, con reflejos dinámicos y luces de la habitación que cambien suavemente de intensidad. Mantén la cámara fija y crea una animación continua en bucle, de alta calidad.
La primera generación parece funcionar. Los peces se mueven y los reflejos cambian. Pero, al dejarla avanzar, aparece un problema: algunos peces empiezan a entrar en la habitación.
No es un detalle menor. La escena depende de que exista una separación entre el interior y el océano. Si los peces cruzan el cristal, esa lógica se rompe.
Corregir un fallo concreto con una instrucción concreta
Vuelvo a enviar la imagen para fijar claramente el punto de partida. Después describo qué falla, aproximadamente cuándo ocurre y qué necesito conservar:
A partir del segundo seis aparecen peces dentro de la habitación. Eso no debe ocurrir. Genera un nuevo video partiendo exactamente de esta imagen, con una duración total de seis segundos y preparado para repetirse en bucle. Los peces deben permanecer detrás del cristal.
La siguiente versión mantiene los peces en el lado correcto. La dejo reproducirse un momento para comprobar que el movimiento conserva la calma que busco.
También le pido al agente que me muestre el prompt exacto utilizado y confirme si incluyó la indicación de alta calidad. Cuando una herramienta prepara una generación por nosotros, me interesa saber qué instrucción terminó enviando, no quedarme únicamente con la petición inicial.
Descargo el archivo y lo adjunto en Antigravity para sustituir la imagen estática por el video de fondo en bucle. Los textos siguen en su sitio y ahora tenemos el agua y los peces moviéndose detrás.
La distinción que conviene mantener es sencilla: este primer video presenta la habitación; no cuenta todavía el recorrido hacia el océano. Para eso voy a preparar otra pieza.
🎨 Probar una alternativa clara sin perder la versión inicial
Antes de construir el resto de la página, quiero comparar la portada con otra dirección visual. Le pido a Antigravity que guarde el diseño actual como versión uno y cree una versión dos más luminosa, con una capa clara sobre la imagen y letras negras.
La alternativa sirve para contrastar sensaciones, pero inicialmente tiene demasiado blanco. La habitación pierde presencia y precisamente quiero que siga siendo protagonista.
Reduzco la intensidad de esa capa y comparo de nuevo. La imagen se recupera, aunque por ahora me convence más la primera opción: los textos blancos destacan bien sobre el interior y la iluminación de la escena tiene más fuerza.
Guardo ambas. No necesito cerrar esa decisión todavía. Prefiero desarrollar primero el recorrido completo y retomar después la alternativa clara con todas las secciones disponibles.
🎬 Crear el viaje desde la habitación hasta el océano
El segundo video tiene una función distinta. Ahora sí quiero que la cámara avance por la habitación, atraviese el cristal sin romperlo y continúe entre peces y corales.
Utilizo la misma imagen horizontal como punto de partida. Así mantengo una relación visual entre la portada y el inicio del viaje. La escena no cambia de repente: entramos en el lugar que ya teníamos delante.
La petición para Flow queda planteada así:
Anima la cámara avanzando por la habitación y atravesando el cristal sin romperlo. Continúa hacia el océano y gira entre peces y corales, con un movimiento cinematográfico fluido y dinámico, de alta calidad.
La generación empieza dentro del cuarto, se acerca a la ventana y después sigue por el arrecife. Ese recorrido es el que quiero conectar al desplazamiento de la página.
Ya tengo dos recursos que se complementan:
- Video de portada: cámara fija, movimiento ambiental y reproducción en bucle.
- Video del recorrido: cámara en movimiento desde la habitación hasta el océano, preparado para convertirse en una secuencia controlada por scroll.
Separarlos me permite pedirle a cada uno exactamente lo que necesita la sección donde va a aparecer.
🖱️ Conectar la secuencia al desplazamiento de la página
Adjunto el segundo video en Antigravity y le pido que amplíe el diseño manteniendo la línea visual de la portada. Quiero una página con al menos cinco secciones, una secuencia animada mediante scroll y textos que aparezcan durante el recorrido.
Le doy libertad para proponer la estructura, pero dejo claras las piezas fundamentales: continuidad visual, nuevas secciones y control del viaje mediante el desplazamiento.
Durante la construcción, Antigravity extrae 240 fotogramas del video y los conecta a un canvas, la superficie de la página donde se van dibujando esas imágenes.
El comportamiento queda vinculado a nuestra posición:
- Al bajar, avanzamos por los fotogramas.
- Al subir, recorremos la secuencia en sentido inverso.
- Al detenernos, la imagen permanece en ese punto del viaje.
No estamos simplemente dejando que un video se reproduzca mientras el contenido baja. El desplazamiento marca el avance de la escena, y eso permite recorrerla a nuestro ritmo.
Quitar elementos también mejora el diseño
La primera propuesta ya incluye títulos, textos y tarjetas entre la portada y la inmersión. La estructura me gusta. Lo que me molesta es todo lo que aparece encima del recorrido: cajas detrás de los textos y varias etiquetas pequeñas.
Pido eliminar parte de esos elementos, dejar más aire y retirar el recuadro que tapa la secuencia. También ajusto la luminosidad y sugiero una sombra ligera para el texto principal.
Con esos cambios, la habitación se aprecia mejor y el recorrido queda menos cubierto. Es una corrección importante porque la animación no necesita competir con una colección de elementos superpuestos.
Integrar la entrada y la salida
Después detecto otro problema: el comienzo del video tiene un borde recto muy evidente. Al terminar la secuencia ocurre algo parecido con la sección siguiente.
Le pido que fusione mejor ambas transiciones. Antigravity añade degradados en los bordes superior e inferior para mezclar la imagen con el fondo de la página.
La secuencia sigue teniendo su propio espacio, pero ya no parece un bloque pegado entre otros dos. La entrada acompaña el acercamiento a la ventana y la salida permite continuar hacia el siguiente contenido sin un corte tan marcado.
🐚 Dar vida al resto de las secciones
Cuando una parte de la web tiene tanto movimiento, las secciones de texto pueden sentirse demasiado estáticas. No quiero que todo se mueva igual, pero sí que el recorrido completo mantenga cierta continuidad.
Le pido a Antigravity que pula las animaciones del resto de la página y que proponga pequeños recursos visuales sin fondo, relacionados con el universo submarino. Para esta petición selecciono el nivel alto de razonamiento.
La herramienta reparte el trabajo entre cuatro subagentes y prepara cuatro piezas con apariencia tridimensional:
- Una concha de nautilus junto a un bloque de texto.
- Un astrolabio que acompaña la sección de pasos.
- Un coral antes de entrar en la secuencia.
- Una medusa cerca del cierre.
Además, los textos se iluminan conforme avanzamos, los números aparecen, las tarjetas reaccionan al cursor y se añaden pequeñas partículas al fondo.
Ahora existe movimiento fuera del video. Me gusta porque los recursos mantienen la temática, pero todavía hay que revisar cómo están integrados. Que una imagen sea bonita no significa que sus límites, su tamaño o su separación respecto a la siguiente sección estén resueltos.
🔧 Corregir recortes, espacios vacíos y fallos del scroll
El coral deja ver uno de esos detalles: su parte inferior se corta al llegar a la siguiente sección. Le falta espacio para terminar de verse correctamente.
La petición es específica: dar más aire entre el coral y el bloque siguiente, corregir el recorte y revisar también la adaptación a móvil. Tenemos varios elementos flotando alrededor del contenido y quiero comprobar qué sucede cuando el ancho disminuye.
Después de ese ajuste aparece otro problema más molesto. Al seguir bajando, queda un tramo enorme donde solo se ve el fondo oscuro. Hay que desplazarse demasiado para llegar a la siguiente sección y parece que la página hubiera terminado antes de tiempo.
No dar una corrección por resuelta sin comprobarla
Señalo que sobra espacio entre el final de la secuencia y el bloque de “mentes inquietas”. Antigravity comunica que lo ha corregido, pero al probarlo el hueco sigue ahí.
Vuelvo a indicarlo y añado algo que también estoy detectando: la secuencia no avanza bien con el desplazamiento.
Los dos síntomas están relacionados. Durante ese tramo, la escena debe permanecer visible mientras recorremos las imágenes. Si el comportamiento fijo falla, podemos seguir bajando por una zona larga sin apreciar el progreso de la animación.
Antigravity encuentra la interferencia en unas reglas que había añadido para recortar lo que sobresalía por los laterales. En esta página estaban afectando al comportamiento fijo de la secuencia.
El mensaje de “corregido” no sustituye a la prueba. Hay que volver al lugar exacto del fallo, recorrerlo y comprobar qué sucede realmente.
Termino de ajustar la distancia entre el coral y el comienzo del recorrido, aumento un poco el contraste de la portada y pido que el fondo sea un 10 % menos oscuro.
Después pruebo el trayecto hacia abajo y también en sentido inverso. Ahora la secuencia avanza, la página continúa sin ese hueco y el azul oscuro permite distinguir mejor las secciones. Guardo este resultado como versión uno.
🌊 Convertir la segunda versión en una alternativa azul y turquesa
Con la estructura resuelta, retomo la versión clara. En lugar de seguir trabajando sobre aquella prueba inicial, le pido que copie la versión uno completa sobre la versión dos y adapte el diseño a fondos claros, azules vivos y turquesas.
Así comparo dos direcciones sobre una base equivalente: mismas secciones, mismo recorrido y mismos elementos. La versión oscura debe conservarse sin cambios.
El primer resultado vuelve a irse demasiado hacia el blanco. La animación parece quedar detrás de una capa pálida y pierde parte de la fuerza del agua.
Aclaro la diferencia: quiero más luminosidad, no una página blanca. Pido fondos celestes y turquesas y dejo abierta la posibilidad de utilizar letras blancas donde funcionen mejor.
Usar el color para unir, no para tapar
Después llega el extremo contrario: la capa turquesa afecta demasiado a toda la imagen. Si cubrimos el video con la misma intensidad de arriba abajo, desaparecen los matices de la madera y del arrecife.
La siguiente corrección concentra el color en los bordes superior e inferior y deja el centro más limpio. El turquesa debe ayudar a conectar los videos con las secciones contiguas, no teñirlo todo por igual.
Con ese ajuste ya tengo dos alternativas que se sienten diferentes:
- Versión oscura: destaca el contraste entre el fondo profundo y la iluminación de la habitación.
- Versión azul y turquesa: extiende el color del agua por el conjunto y presenta una atmósfera más luminosa.
La estructura no necesita cambiar para que cambie la sensación del sitio. El fondo, el contraste y la forma de integrar las imágenes tienen mucho peso.
📱 Afinar las portadas y revisar ambas versiones en móvil
Antes de comparar definitivamente las dos opciones, igualo el contenido de sus portadas. Retiro una pequeña cápsula sobre el título que mencionaba personas suscritas. Ya hay suficiente información visual detrás y prefiero dar espacio al bloque principal.
También pido subir un poco el conjunto. El primer movimiento resulta excesivo, así que lo corrijo: que reduzca a la mitad lo desplazado y aumente algo el tamaño del bloque.
El título y el formulario terminan en una posición intermedia más equilibrada. Esta es otra parte habitual del proceso: una instrucción razonable puede producir un cambio demasiado intenso y necesitar una segunda calibración.
Después abro las herramientas de desarrollo de Chrome y reviso la página local en una vista estrecha.
El encuadre cambia bastante. Los laterales de la habitación desaparecen, aunque la ventana permanece en el centro. El título ocupa más líneas y los elementos se organizan verticalmente.
No me quedo solo en la primera pantalla. Recorro las tarjetas, los recursos decorativos y la secuencia del océano. Después hago lo mismo con la versión oscura.
En esta revisión me interesa comprobar:
- Cómo se recorta el fondo al reducir el ancho.
- Si el título y el formulario conservan una composición clara.
- Cómo se distribuyen las tarjetas y los elementos flotantes.
- Si las separaciones siguen teniendo sentido.
- Cómo avanza y retrocede la secuencia submarina.
Una sección que tiene mucho aire en escritorio puede cambiar por completo en una pantalla estrecha. Por eso reviso ambas versiones enteras, no únicamente la portada.
🚀 Publicar la web en Hostinger
Con las dos alternativas preparadas, paso a la publicación. Utilizo Hostinger con mi enlace de descuento y entro en la sección de sitios web.
Selecciono la creación de un sitio HTML y un dominio temporal. Eso me permite abrir el resultado desde una dirección pública, fuera del entorno local.
El proceso que sigo es este:
- Elegir la opción de subir los archivos del sitio.
- Preparar un ZIP con las páginas y la carpeta de recursos.
- Incluir las imágenes, los videos y los fotogramas utilizados por la secuencia.
- Subir el archivo comprimido a Hostinger.
- Crear el sitio y esperar la confirmación.
- Abrir la dirección temporal en Chrome y recorrer las dos versiones.
La carpeta de recursos es especialmente importante en este proyecto. La experiencia no depende solo de las páginas: también necesita los archivos visuales que forman la portada y el viaje controlado por scroll.
Una vez publicado, repito el recorrido. Bajo desde la habitación, paso por las secciones y entro en el océano. Después vuelvo a subir para comprobar la secuencia inversa. Hago la misma revisión con la alternativa azul y turquesa.
💡 Lo que realmente marca la diferencia al crear webs con IA
Lo que más me gusta del resultado es que la habitación cumple dos funciones. Primero presenta el sitio y después se convierte en la puerta de entrada al océano. No son dos escenas independientes: una prepara la siguiente.
También me resulta útil conservar las dos versiones. La oscura resalta la luz interior; la azul y turquesa hace más presente el agua en todo el recorrido. Compararlas con el mismo contenido permite entender mejor qué aporta cada dirección.
Si quieres apoyarte en recursos para tus propios proyectos, además de la biblioteca de Dínamo Sites tienes prompts profesionales en Primera App. Y para seguir compartiendo procesos de creación con inteligencia artificial, puedes unirte a mi comunidad de creación de apps con IA.
La lección de este proyecto no es encontrar una instrucción mágica. Es trabajar por etapas: validar la composición, separar las funciones de cada animación, describir los fallos con precisión y comprobar cada cambio.
La IA puede construir mucho, pero el criterio aparece cuando decides qué conservar, qué quitar y qué todavía no funciona. Ahí es donde una primera propuesta empieza a convertirse en una web cuidada.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
