Una web animada impactante no suele salir de un único prompt. La imagen puede ser espectacular y la primera versión del sitio puede funcionar, pero todavía quedan decisiones que ninguna herramienta debería tomar por nosotros: qué parte del paisaje merece protagonismo, cómo se mueve la cámara, dónde se coloca el texto y qué sucede cuando alguien desplaza la página hacia arriba.
Para construir esta web de un Lamborghini amarillo atravesando una montaña nevada, combiné imágenes generadas con IA, vídeos creados en Google Flow, referencias de diseño de Dínamo Sites y el desarrollo en Google AI Studio. Después preparé el proyecto para GitHub y lo publiqué en Hostinger. El resultado tiene una portada en movimiento, una secuencia controlada por el scroll y una escena lateral donde la tipografía aparece detrás del coche.
Lo importante no es la cantidad de herramientas. Es cómo se conectan las piezas y cómo se corrige cada resultado. Estas son las decisiones que convirtieron una idea visual en una página lista para compartir.
Tabla de contenido
- 🏔️ Primero, una imagen capaz de sostener toda la web
- 🧱 Una referencia de diseño ahorra decisiones, no reemplaza el criterio
- 🎥 Google Flow: movimiento sin perder el encuadre
- ✍️ Cuando cambia el fondo, también debe cambiar la composición
- 🖱️ Una secuencia de imágenes para contar la historia con el scroll
- 🚗 Texto detrás del coche: construir profundidad con capas
- 📱 Revisar el móvil antes de llamar terminado al proyecto
- 🚀 De AI Studio a GitHub y Hostinger
- 🎯 Cuándo merece la pena crear una web así
🏔️ Primero, una imagen capaz de sostener toda la web
Comencé buscando una referencia visual en Pinterest. Encontré una imagen vertical de un Lamborghini blanco en una carretera de montaña. Tenía lo esencial: carretera, nieve, montañas y el coche como centro de atención. Pero no tenía ni el formato ni el color que necesitaba para la portada.
Llevé esa referencia a ChatGPT y pedí una versión horizontal de 16:9, con mucho detalle, calidad alta y una estética cinematográfica. También pedí que el coche permaneciera en el centro y que fuera amarillo. El amarillo crea un contraste inmediato con la nieve y permite identificar el elemento principal incluso cuando el paisaje ocupa buena parte de la pantalla.
La posición central resolvía otra necesidad desde el comienzo: el recorte en móvil. Una imagen panorámica pierde espacio en los laterales cuando se adapta a una pantalla estrecha. Si el elemento importante queda demasiado cerca de un borde, puede desaparecer. Con el coche centrado, tenía margen para recortar el paisaje sin perder el protagonista.
Esta imagen no era un recurso provisional que luego sustituiría sin más por un vídeo. Era la base de la dirección visual. Antes de añadir movimiento, quería comprobar que la composición estática funcionaba: que el coche se distinguiera, que la carretera aportara profundidad y que hubiera espacio para incorporar contenido. Si la imagen principal no tiene fuerza, el vídeo por sí solo no va a arreglarla.
🧱 Una referencia de diseño ahorra decisiones, no reemplaza el criterio
Con la imagen preparada, entré en Dínamo Sites para buscar una estructura inicial. En lugar de pedirle a AI Studio que inventara una interfaz completa desde cero, elegí una sección principal que ya tenía una composición, textos y un vídeo de ejemplo.
La intención no era conservar ese diseño tal cual. Quería aprovechar su estructura y trasladarla al universo del coche y las montañas. Copié la referencia en Google AI Studio y añadí una indicación para que el contenido estuviera relacionado con un Lamborghini Huracán circulando por una montaña nevada.
La primera versión ya tenía una jerarquía reconocible, pero seguía mostrando el vídeo de la plantilla. Subí la imagen que había generado y pedí que la utilizara como fondo. Ahí apareció un error importante: se veía un Lamborghini amarillo en la nieve, pero no era el archivo que yo había elegido. AI Studio había reinterpretado la imagen.
A simple vista podía parecer suficientemente parecido. Para este proyecto no lo era. La imagen aprobada iba a servir de punto de partida para el vídeo y para mantener una identidad visual coherente. Le indiqué que debía usar el archivo exacto, no generar una versión similar.
La solución fue colocar la imagen en la carpeta pública del proyecto y darle su nombre. Así AI Studio podía referirse a un recurso concreto dentro de la web. Es una distinción práctica que conviene recordar: mostrar una imagen en una conversación no significa necesariamente que esa imagen ya sea un archivo disponible para el proyecto.
El paisaje también forma parte de la interfaz
Una vez apareció la imagen correcta, surgió el siguiente problema. Había demasiado texto y una capa oscura sobre toda la portada apagaba la nieve. La capa facilitaba la lectura, sí, pero escondía precisamente el paisaje que justificaba esta dirección visual.
Pedí que quitara esa capa, acortara los textos y subiera ligeramente el título, el subtítulo y los botones. Al retirar el oscurecimiento global, la montaña recuperó presencia. El texto blanco, sin embargo, necesitaba algo de ayuda en las zonas claras. En vez de volver a tapar la imagen, trabajé el contraste alrededor de las letras con una sombra suave y simplifiqué aún más el contenido.
La lección es sencilla: cuando una portada depende de una fotografía o una escena potente, no conviene resolver todos los problemas de legibilidad oscureciendo la pantalla entera. A veces basta con reducir texto, cambiar su posición y aplicar contraste donde realmente hace falta.
🎥 Google Flow: movimiento sin perder el encuadre
Con la portada estática funcionando, pasé a Google Flow. Quería que el Lamborghini avanzara hacia nosotros, pero sin abandonar la vista frontal. Pedí un vídeo cinematográfico de alta calidad en el que la cámara mantuviera el coche centrado.
El primer resultado movía el coche, aunque también hacía girar la cámara y cambiaba la toma. Era una secuencia dinámica, pero no servía para la portada que estaba construyendo. Necesitaba una toma de seguimiento: el coche avanza y la cámara retrocede a un ritmo parecido. Así el vehículo mantiene aproximadamente su tamaño mientras la carretera y las montañas se desplazan detrás.
La siguiente instrucción fue mucho más precisa. Expliqué que no quería una cámara orbitando alrededor del Lamborghini, sino una cámara que retrocediera conservando el ángulo frontal. El segundo resultado se acercó bastante más a la idea. El coche permanecía dentro del encuadre y el movimiento reforzaba la profundidad de la escena.
Este tipo de corrección marca una diferencia enorme al generar vídeo con IA. «Hazlo cinematográfico» describe una intención, pero no define la trayectoria de cámara. Si el movimiento es esencial para el diseño, hay que especificar qué se mueve, en qué dirección y qué debe permanecer estable.
Descargué el vídeo y lo subí a Cloudinary para obtener un enlace directo. Después se lo pasé a AI Studio y pedí sustituir la imagen de fondo por ese archivo. Ya teníamos movimiento en la portada, pero todavía faltaba adaptar la interfaz a la nueva escena.
✍️ Cuando cambia el fondo, también debe cambiar la composición
La primera interfaz se sentía demasiado rígida sobre el vídeo. Volví a Dínamo Sites y seleccioné otra referencia: una portada más editorial, con Instrument Serif para el título e Inter para el resto de la interfaz. El coche ya llamaba la atención por sí solo. No necesitaba una capa de diseño que compitiera con él.
Pedí a AI Studio que aplicara esa nueva dirección tipográfica y visual. La composición mejoró, aunque las tres tarjetas de vídeo quedaron en la parte inferior de la portada, justo encima de la zona del coche que quería mostrar completa. En lugar de intentar encajarlas a la fuerza, las trasladé a una segunda sección.
Ese cambio ordenó la página. La primera pantalla quedó dedicada al impacto visual; las tarjetas tuvieron su propio espacio para ampliar la historia. No todos los elementos útiles tienen que aparecer en el primer pantallazo.
Luego trabajé la posición del bloque superior. Quería que el título, el subtítulo y el pequeño campo de la portada quedaran por encima del techo del coche, sin taparlo y sin esconder la nieve. Pedí una línea de título más contenida, un campo menos ancho y que todo el grupo subiera ligeramente.
Me pasé de ajuste. El título terminó demasiado pequeño y el bloque quedó demasiado cerca de la navegación. La siguiente corrección fue pedir un punto intermedio entre ambas versiones. No se trataba de subir o bajar todo indiscriminadamente, sino de encontrar una altura en la que el contenido se leyera con comodidad y el Lamborghini siguiera dominando la escena.
Esta parte del trabajo puede parecer poco espectacular, pero es donde se construye buena parte de la calidad final: revisar, comparar y corregir proporciones. Una instrucción no es una sentencia definitiva. Es una propuesta que hay que contrastar con el resultado.
🖱️ Una secuencia de imágenes para contar la historia con el scroll
La portada ya tenía un vídeo de fondo. Para la siguiente gran escena quería otra relación con el movimiento: que la persona pudiera avanzar por la carretera al bajar, retroceder al subir y detenerse exactamente donde quisiera. Un vídeo convencional que simplemente se reproduce no produce esa misma sensación de control.
Preparé otro clip del coche atravesando la nieve y pedí a AI Studio que lo convirtiera en una secuencia de imágenes para crear un efecto de scrollytelling. También indiqué que incorporara textos animados relacionados con el coche y que estudiara los fotogramas para colocarlos donde hubiera espacio y contraste.
AI Studio extrajo 80 fotogramas y los vinculó a la posición de desplazamiento de la página. En lugar de depender de que el reproductor busque una y otra vez un instante dentro de un archivo MP4, la página muestra la imagen correspondiente al punto actual del scroll.
- Al bajar: el recorrido avanza.
- Al subir: la secuencia vuelve hacia atrás.
- Al detenerse: la escena permanece en el fotograma elegido.
Después de generar la primera versión, precisé el orden de la página. Primero debía aparecer la portada con el coche frontal, después las tarjetas y solo en tercer lugar la secuencia controlada por el desplazamiento. El efecto tenía más sentido como una continuación de la historia que como una sustitución de la presentación inicial.
También encontré el mismo problema visual que antes: una capa oscura cubría toda la imagen y, además, había un recuadro semitransparente detrás del texto. Las dos soluciones trataban de resolver la misma necesidad. Juntas hacían que la nieve perdiera fuerza.
Pedí retirar la capa general y conservar el apoyo localizado para el contenido. Aproveché para solicitar una transición más limpia entre esa secuencia y la sección siguiente, porque el corte resultaba demasiado evidente. El resultado dejó respirar la imagen y dio continuidad al recorrido.
Las tres tarjetas de la segunda sección seguían siendo provisionales. Para que no repitieran exactamente la misma toma, sustituí el vídeo de la tarjeta central por el segundo clip que había subido a Cloudinary. Es un detalle pequeño, pero la variedad de planos ayuda a que cada tramo de la página tenga una función visual propia.
🚗 Texto detrás del coche: construir profundidad con capas
Después de la secuencia de scroll, quería una escena distinta, que no dependiera de reproducir otro vídeo. Se me ocurrió mostrar el Lamborghini de perfil y situar una palabra grande detrás de él. Así el coche parecería ocupar un primer plano y la tipografía formaría parte del paisaje.
Con una única imagen plana, eso no funciona del mismo modo. Si colocas el texto encima de la fotografía, queda por delante de todo. Si lo colocas detrás, la propia fotografía lo tapa por completo. Para conseguir el efecto necesitaba separar visualmente el fondo y el coche.
Volví a ChatGPT y pedí una composición horizontal de 16:9 diferente de la portada: una vista lateral completa del Lamborghini en un paisaje nevado. A partir de esa imagen preparé tres recursos:
- La escena completa: la referencia visual del resultado que quería conservar.
- El paisaje sin el coche: la capa que quedaría al fondo.
- El coche recortado con transparencia: la capa que se colocaría delante de la tipografía.
Al solicitar el recorte, pedí conservar intactos los elementos del primer plano, con bordes limpios y suaves y un fondo transparente. En AI Studio dejé los archivos dentro de la carpeta pública y expliqué cómo debían combinarse. La escena completa serviría para entender la composición; los otros dos archivos permitirían insertar una palabra entre el paisaje y el Lamborghini.
La primera versión de la sección incluía más movimiento y elementos de los que había pedido. La simplifiqué: coche ligeramente más pequeño, palabra de fondo en negrita y proporciones más cercanas a la imagen de referencia.
Tampoco quería que las capas se desplazaran al hacer scroll o mover el ratón. El objetivo era transmitir profundidad mediante la superposición, no convertir la escena en una demostración de efectos. Pedí que se mantuviera esencialmente quieta, con un leve temblor al pasar el cursor sobre el coche, como si el motor estuviera rugiendo.
Hubo dos correcciones de realismo especialmente importantes. Primero, la inclinación: la parte delantera debía bajar aproximadamente dos grados para acompañar el ángulo de la carretera. Después, la posición: la rueda trasera parecía flotar sobre una roca, así que moví el coche un poco hacia delante. Puede parecer un detalle mínimo, pero una rueda que no toca bien el suelo rompe inmediatamente la ilusión.
La palabra del fondo también ocupaba demasiado ancho. Pedí acortarla hasta que dejara de imponerse sobre la carrocería. Al final, la composición tenía lo que buscaba: el coche asentado sobre la carretera, la tipografía detrás y un gesto de movimiento muy discreto al interactuar.
📱 Revisar el móvil antes de llamar terminado al proyecto
Una portada panorámica, una secuencia de desplazamiento y una composición por capas pueden verse bien en escritorio y perder su sentido en una pantalla estrecha. Por eso revisé la versión móvil en AI Studio.
La decisión inicial de centrar el coche ayudó mucho. El recorte lateral del hero seguía dejando visible el elemento principal, y el título y el pequeño formulario se reorganizaban para ocupar el espacio disponible. También comprobé el resto de secciones, incluida la escena lateral, dentro de esa vista estrecha.
La revisión móvil no consiste solo en comprobar que nada se salga de la pantalla. Hay que preguntarse si se entiende la misma historia: si el coche conserva protagonismo, si los textos se leen y si el orden de los elementos sigue teniendo sentido. En una página tan visual, esas comprobaciones son parte del diseño, no una tarea administrativa del final.
🚀 De AI Studio a GitHub y Hostinger
Con la web preparada, faltaba sacarla del editor. Quería un enlace que pudiera enviar a un cliente o incluir en mi portafolio. Primero pedí a AI Studio que dejara el proyecto listo para llevarlo a GitHub.
Pienso en GitHub como el lugar donde guardo el código y las nuevas versiones de la web. Así no tengo que subir manualmente todos los archivos cada vez que hago una modificación. Una vez conectado el proyecto con Hostinger, al guardar una nueva versión en GitHub, Hostinger puede volver a publicar el sitio.
El proceso de publicación que seguí fue este:
- Entré en la sección de sitios web de Hostinger y elegí añadir un sitio.
- Seleccioné la opción de aplicación Node.js.
- Escogí un dominio temporal para tener un enlace de prueba.
- Continué mediante GitHub y seleccioné el repositorio del proyecto Lamborghini.
- Inicié el despliegue y abrí el dominio temporal al finalizar.
Fuera del editor, comprobé que aparecieran la portada, las tarjetas, la secuencia de scroll y la escena lateral. Esta revisión fue importante porque la página publicada es la que realmente voy a compartir.
De hecho, al abrir la portada en el dominio temporal noté algo que todavía quería ajustar: el título, el subtítulo y el campo quedaban demasiado cerca de la cabecera. Volví a AI Studio y pedí bajar ese grupo aproximadamente un 20 % y aumentar ligeramente el tamaño de las letras. Había espacio para hacerlo sin tapar el coche.
Guardé el cambio en GitHub, Hostinger lo volvió a desplegar y confirmé el resultado en el mismo enlace. Esa es la ventaja práctica de este flujo: puedo seguir mejorando la web sin subir todo de nuevo ni cambiar la dirección que ya compartí.
🎯 Cuándo merece la pena crear una web así
Una experiencia cinematográfica no es automáticamente la mejor solución para cualquier negocio. Si una empresa local necesita explicar sus servicios con claridad y trabajar su posicionamiento, probablemente convenga priorizar una página más directa. Añadir vídeos y efectos porque sí no le aporta valor.
En una campaña, un lanzamiento de producto o un proyecto en el que la presentación visual tiene mucho peso, la situación cambia. Ahí una portada que establece el ambiente, una secuencia que responde al scroll y una escena con profundidad pueden convertir la página en parte de la propuesta creativa.
Lo que más me interesa de este proceso es que la IA permite producir recursos y probar ideas con rapidez, pero no elimina la necesidad de dirigir el trabajo. Tuve que elegir la imagen, detectar que se estaba usando el archivo equivocado, corregir la cámara, retirar capas oscuras, mover tarjetas, revisar ruedas y ajustar el diseño después de publicarlo.
La web no apareció completa de una sola generación. Surgió de combinar herramientas distintas y dar instrucciones cada vez más concretas en función de lo que veía. Si quieres repetir el proceso, dejé disponibles los prompts utilizados en el proyecto. El código y los recursos de esta web estarán en mi comunidad de creación de apps con IA. Y si te interesa aplicar este tipo de trabajo a una aplicación propia, también tienes mis prompts profesionales para crear tu app.
Mi recomendación es comenzar por una escena estática realmente buena. Después decide qué movimiento mejora esa escena, qué contenido merece una sección independiente y qué interacción aporta algo que una imagen fija no puede ofrecer. La IA puede ayudarte a construir cada pieza. El criterio para saber cuándo una pieza funciona sigue siendo tuyo.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
