Crear una web animada con inteligencia artificial ya no significa escribir un prompt genérico, cruzar los dedos y publicar el primer resultado. Esa fórmula casi nunca funciona.
Una web premium, especialmente para una marca inmobiliaria, una campaña o un lanzamiento donde el impacto visual importa, se construye tomando decisiones pequeñas durante todo el proceso: definir una dirección estética, encontrar una buena composición, pedir correcciones precisas, controlar el movimiento, simplificar la interfaz y probar cada parte antes de continuar.
El proyecto de este artículo es una web para una constructora de casas de lujo. La experiencia final se divide en tres momentos: un héroe editorial con una casa sobre una isla flotante, un catálogo de proyectos con una composición limpia y un recorrido interior controlado completamente con el scroll.
Las herramientas pueden cambiar, los modelos también, pero el proceso detrás de una web animada con IA sigue siendo muy replicable.
Tabla de contenido
- ✨ La idea central: la IA no toma las decisiones importantes
- 🧭 Encontrar una referencia sin quedarse atrapado buscando
- 🧱 Partir desde una estructura de diseño sólida
- 🏠 Crear la imagen principal pensando en la web, no solo en la imagen
- 🎬 Animar la isla: movimiento controlado para un fondo premium
- 📐 Construir un catálogo de proyectos sin parecer una aplicación
- 🚁 Convertir un tour de dron en una experiencia controlada por scroll
- 🧩 La estructura final de la web animada
- 🛠️ Qué función cumplió cada herramienta
- 💡 Cuándo tiene sentido usar una web animada con IA
- ✅ Un proceso replicable para crear landing pages premium con IA
- 🌱 Recursos para seguir creando con IA
✨ La idea central: la IA no toma las decisiones importantes
Lo más interesante de trabajar con Google AI Studio, Gemini, ChatGPT y herramientas de generación visual no es que puedan producir una página completa en segundos. Lo importante es que permiten avanzar muy rápido cuando ya existe una dirección clara.
La inteligencia artificial puede generar una estructura, una imagen, un video o una interacción. Pero no sabe por sí sola cuál debe ser la composición correcta, qué elemento tiene que estar centrado para que el diseño funcione en móvil, cuánta animación es demasiada o cuándo una sección se está viendo más como una aplicación que como una pieza editorial.
Ahí entra el criterio creativo.
En vez de pensar en una sola instrucción enorme, conviene trabajar como si se estuviera dirigiendo un proyecto:
- Primero: elegir una dirección visual y una referencia útil.
- Después: partir desde una buena estructura de diseño, no desde una pantalla vacía.
- Luego: crear recursos visuales que respondan a una composición específica.
- Más tarde: animar solamente los elementos que deben moverse.
- Finalmente: conectar los recursos a la web, probar, corregir y simplificar.
Este enfoque evita dos problemas muy comunes: dejar que la IA improvise demasiado y perder horas intentando conseguir un resultado perfecto desde el primer prompt.
🧭 Encontrar una referencia sin quedarse atrapado buscando
El punto de partida fue Pinterest. La intención inicial era hacer algo relacionado con arquitectura o una constructora, pero el concepto todavía no estaba completamente definido. En ese momento no hace falta tener la respuesta exacta. Hace falta una imagen que ayude a decidir hacia dónde ir.
Una de las ventajas de Pinterest es que una buena referencia abre otras rutas visuales. Al encontrar una imagen atractiva, empiezan a aparecer composiciones, colores, estilos arquitectónicos y atmósferas relacionadas. Así es mucho más fácil pasar de una idea vaga a una dirección concreta.
La referencia elegida mostraba una casa contemporánea construida sobre un fragmento de tierra suspendido. Esa imagen no se utilizó para copiarla, sino para extraer los elementos que definían la idea:
- Una vivienda moderna como protagonista.
- Una isla o porción de terreno flotante.
- Una composición central.
- Una escena atmosférica y cinematográfica.
- Espacio alrededor de la casa para integrar texto e interfaz.
Este punto es clave. Una referencia no tiene que ser perfecta para ser útil. Si ya permite definir una dirección, es mejor empezar a probar. Buscar durante tres horas una imagen ideal no acerca la web al resultado final.
La pregunta correcta no es “¿esta referencia se parece exactamente a lo que quiero?”. La pregunta es “¿esta referencia me ayuda a tomar la siguiente decisión?”.
🧱 Partir desde una estructura de diseño sólida
Con la dirección visual más clara, el siguiente paso fue ir a Dínamo Sites. Este tipo de biblioteca es útil porque entrega secciones ya pensadas con decisiones de tipografía, jerarquía, composición y responsive.
En lugar de pedirle a la IA que invente toda la estructura desde cero, se puede tomar una sección que ya funciona y adaptarla al proyecto. Para el héroe se eligió una estructura llamada “Vídeo”, porque incluía una sección de portada con video de fondo, tipografía editorial y una composición visualmente limpia.
El prompt base de esa sección ya contenía lineamientos técnicos importantes: el video ocupando todo el fondo, las fuentes, la jerarquía de los textos, la ubicación del contenido, comportamientos para móvil y reglas de accesibilidad.
Ese detalle es muy útil. Como el héroe es la primera sección, también establece gran parte del lenguaje visual del resto de la página. Si el comienzo ya define una buena jerarquía y proporción, es mucho más fácil extender el sistema hacia abajo.
La primera versión generada en Google AI Studio tenía la base correcta, pero el video aún no aparecía detrás del contenido y la posición de los textos necesitaba ajustes. La corrección no tuvo que ser compleja. Bastó con indicar que el contenido central debía subir porque habría otra sección debajo, y que el video tenía que quedar visible como fondo.
Después apareció otro problema típico: el copy se sentía demasiado genérico. En vez de reescribir toda la página, se pidió adaptar el texto a una constructora de casas de lujo y mantenerlo breve.
Esto muestra una forma mucho más eficiente de trabajar: identificar qué está fallando y corregir solamente eso. No hace falta regenerar todo cuando el problema es la altura de un título, el contraste del texto o una frase que no comunica bien el rubro.
🏠 Crear la imagen principal pensando en la web, no solo en la imagen
La imagen del héroe debía cumplir una función muy concreta: ser el fondo de una web de lujo. Por eso no bastaba con generar una casa atractiva. La composición tenía que funcionar detrás de títulos, botones y navegación, y además debía resistir el recorte de pantallas estrechas.
Para crearla se usó ChatGPT con la imagen de referencia adjunta. La instrucción principal era tomar esa composición como guía, crear una casa flotante como si hubiera sido extraída directamente desde la tierra y entregarla en formato horizontal.
También se definieron desde el principio varios criterios importantes:
- Escena horizontal para cubrir el héroe completo.
- Noche oscura para aumentar el contraste con la iluminación cálida de la casa.
- Sin textos, logos, interfaz ni elementos gráficos incrustados.
- Una vivienda que se entendiera claramente dentro de la isla.
- Espacio suficiente para colocar contenido HTML encima.
La primera generación se acercaba, pero la casa no estaba en la ubicación adecuada. Ahí apareció una de las decisiones más importantes del proyecto: llevar la casa hacia el centro.
En escritorio, una imagen horizontal muestra toda la composición. En móvil, los costados suelen desaparecer por el recorte. Si el elemento principal queda demasiado hacia una esquina, la idea se pierde. Cuando la casa se mantiene centrada, se pueden cortar los laterales sin destruir la escena.
La corrección fue directa: casa centrada, noche más oscura, perspectiva frontal y una toma un poco más alejada. Después se pidió una alternativa más limpia y realista. Finalmente, la vivienda seguía ocupando demasiado espacio, así que se ajustó reduciendo su tamaño aproximadamente un 20%.
Ese último ajuste parece pequeño, pero transforma la utilidad de una imagen. Al darle más aire a la casa, se entiende mejor la isla completa y queda espacio para que el título, el subtítulo y el botón respiren sin competir con la arquitectura.
Cómo escribir mejores instrucciones para fondos de héroe
Cuando una imagen se usará como fondo, el prompt debe incluir decisiones de interfaz aunque la interfaz se construya más tarde con HTML. Conviene especificar:
- Formato: horizontal, vertical o cuadrado según el uso.
- Foco: el objeto principal centrado, a la izquierda o a la derecha.
- Escala: cerca, lejos, con aire negativo o ocupando casi todo el cuadro.
- Iluminación: clara, nocturna, contrastada, cálida o cinematográfica.
- Restricciones: sin texto, sin personas, sin logos, sin interfaz.
- Uso final: fondo de landing page, portada, tarjeta o sección editorial.
Una buena imagen para redes sociales no necesariamente funciona como un buen héroe web. El contexto de uso tiene que formar parte de la dirección creativa desde el prompt.
🎬 Animar la isla: movimiento controlado para un fondo premium
Con la imagen principal terminada, el siguiente objetivo fue convertirla en un video de fondo. La idea era sencilla: una isla flotante girando lentamente, luces que se encienden y apagan, nubes con movimiento ambiental mínimo y una cámara completamente fija.
La palabra importante aquí es control.
Al generar video con IA, si no se explica con precisión qué puede moverse y qué debe quedarse quieto, el resultado empieza a inventar paneos, zooms, cambios de escena, deformaciones o movimientos de cámara que arruinan la composición.
Primero se preparó el prompt con ayuda de ChatGPT. Después, en Google Labs Flow, se configuró formato 16:9 y se usó la imagen como frame inicial. La generación se realizó con Gemini Omni Flash 1.1.
La estructura del prompt de animación incluía estas instrucciones:
- Usar la imagen como frame inicial y referencia visual exacta.
- Mantener casa, isla, noche, iluminación y composición general.
- Dejar la cámara fija, sin zoom, paneo, traveling ni desplazamientos.
- Rotar suavemente la isla sobre su eje vertical.
- Permitir movimiento muy sutil en las nubes.
- Activar y desactivar algunas luces de la residencia.
- Crear un loop visualmente consistente.
- Evitar texto, logos, personas, cambios de escena y morphing.
Para un héroe, un video normal en loop funciona muy bien. Es un movimiento ambiental, no una interacción que necesite control directo. La animación debe sumar atmósfera sin exigir atención constante.
Después de generar el video, se subió a Cloudinary para obtener una URL directa y utilizar el archivo dentro del proyecto. Si necesitas un hosting para tu sitio o proyecto web, puedes acceder al descuento de Hostinger.
Al integrar el video en Google AI Studio apareció otro detalle: el título se perdía en algunas zonas más claras del fondo. La solución fue cambiar título y subtítulo a blanco y añadir una sombra mínima.
La sombra tenía que ser casi imperceptible. El objetivo no era crear una caja oscura que tapara la casa, sino mantener la lectura sin destruir la sensación editorial. A veces el mejor ajuste visual es el más discreto.
📐 Construir un catálogo de proyectos sin parecer una aplicación
Una vez resuelto el héroe, faltaba crear la segunda parte de la página: un catálogo de proyectos anteriores de la constructora.
Otra vez, en vez de diseñar desde cero, se tomó de Dínamo Sites una estructura llamada “Frame Grid”. La lógica fue exactamente la misma: usar una base que ya tenía buena organización y adaptarla al contexto inmobiliario mediante instrucciones claras.
La primera versión tenía un problema de escala. Títulos, subtítulos y botones resultaban demasiado grandes comparados con la portada. La corrección fue específica: reducir esos elementos alrededor de un 20%.
Pero la proporción no era el único problema. La sección seguía sintiéndose como una interfaz de producto digital, con demasiados elementos compitiendo entre sí. Para una inmobiliaria de lujo, eso no ayudaba.
Entonces se pidió una dirección distinta:
- Secciones más limpias.
- Más espacio vacío.
- Una presentación más conceptual y editorial.
- Menos apariencia de panel o aplicación.
- Animaciones sutiles.
No se trataba de copiar una página concreta ni de perseguir una estética por moda. Era una forma rápida de comunicar que la interfaz necesitaba más aire y menos ruido visual.
El espacio en blanco no es espacio perdido. En una página de arquitectura premium, permite que las imágenes, los títulos y las decisiones tipográficas respiren. También comunica calma, confianza y cuidado por los detalles.
La regla de oro de las animaciones
Cuando ya existe una animación fuerte en el héroe, como una isla girando sobre nubes nocturnas, el resto de la interfaz debe calmarse. No hace falta animar cada tarjeta, botón, título y línea decorativa.
Si todo se mueve al mismo tiempo, no hay jerarquía. La página termina cansando y el elemento principal pierde impacto.
Una distribución más equilibrada sería:
- Héroe: animación ambiental visible y controlada.
- Catálogo: transiciones suaves, cambios discretos y foco en las fotografías.
- Recorrido interactivo: movimiento guiado por el scroll, porque ahí sí existe una intención narrativa.
La animación no debería aparecer para demostrar que se puede animar. Debe tener un motivo dentro de la experiencia.
🚁 Convertir un tour de dron en una experiencia controlada por scroll
La parte más interesante del proyecto era entrar en la casa. La intención era crear un recorrido como si una cámara de dron comenzara fuera de la residencia, avanzara hacia ella y atravesara diferentes habitaciones en un único movimiento continuo.
Para generar este segundo video se reutilizó la imagen de la casa como referencia visual en Flow con Gemini Omni Flash 1.1. El prompt pedía una toma cinematográfica, fotorealista y rápida, desde una perspectiva de cámara o dron sin mostrar el dron.
El recorrido debía empezar frente a la casa flotante de noche, avanzar hacia el frente, entrar de manera natural y atravesar:
- Sala de estar.
- Comedor.
- Cocina.
- Pasillos.
- Escaleras.
- Dormitorios.
- Baños.
- Terraza.
También se mantuvieron restricciones importantes: arquitectura realista, iluminación interior cálida, noche oscura al exterior, sin textos, sin personas, sin logos, sin cortes bruscos y sin deformaciones.
El resultado entregó una entrada rápida desde el exterior y una secuencia interior continua. En ese momento apareció una posibilidad muy potente: ese único video podía transformarse en varias secciones de la web.
El archivo se subió nuevamente a Cloudinary y se llevó a Google AI Studio. La instrucción fue convertir el MP4 en una secuencia de imágenes, sincronizarla con el scroll y crear contenido relacionado con las habitaciones o características mostradas en cada parte del recorrido.
Google AI Studio generó dos propuestas. Después de probar ambas avanzando y retrocediendo por la página, se eligió la opción A. Esta versión utilizó un canvas con 120 fotogramas, sincronizados con el scroll, y dividió el recorrido en cuatro áreas con textos vinculados a la habitación que aparecía en pantalla.
Por qué una secuencia de imágenes funciona mejor que un video normal
Un video de fondo puede reproducirse por sí solo porque su función es crear atmósfera. Pero un recorrido arquitectónico pide algo diferente: control narrativo.
Al convertir el video en frames y relacionarlo con el scroll, cada desplazamiento avanza o retrocede por el recorrido. Esto permite que la experiencia se sienta como una exploración, no como una animación que pasa demasiado rápido.
La diferencia es importante:
- Video en loop: ideal para ambiente, portada y movimiento decorativo.
- Secuencia de frames con scroll: ideal para contar una historia visual por etapas.
Además, dividir el trayecto en bloques de contenido permite acompañar la imagen con mensajes relevantes. Si la cámara está en la sala, el texto puede hablar de amplitud, vistas o materialidad. Si llega a la cocina, puede presentar funcionalidad, integración o acabados. La imagen y el copy avanzan juntos.
🧩 La estructura final de la web animada
Después de las correcciones, pruebas y decisiones de dirección visual, la landing page quedó organizada en tres grandes partes:
- Héroe editorial: una casa sobre una isla flotante gira lentamente durante la noche, con títulos blancos y una composición limpia.
- Catálogo de proyectos: una selección de residencias anteriores presentada con más aire, mejor escala y una estética menos parecida a una aplicación.
- Recorrido interior: un tour generado como video de dron, convertido en 120 fotogramas y controlado por el scroll en diferentes secciones.
Lo valioso no es solo el resultado final. Es la forma en que se llegó a él. Se construyó una parte, se probó, se corrigió y recién después se avanzó a la siguiente.
Este método reduce el caos. También evita que una mala decisión al comienzo se propague por toda la web.
🛠️ Qué función cumplió cada herramienta
Una web así no salió de una sola herramienta. Cada una tuvo una tarea concreta dentro del flujo:
- Pinterest: encontrar una dirección visual inicial y referencias de composición.
- Dínamo Sites: aportar secciones, prompts y sistemas de composición para el héroe y el catálogo.
- ChatGPT: crear la imagen principal y preparar prompts de imagen y video.
- Google Labs Flow con Gemini Omni Flash 1.1: generar el loop de la isla y el recorrido interior estilo dron.
- Cloudinary: alojar los videos y obtener URLs directas para integrarlos en la web.
- Google AI Studio: construir, integrar, ajustar y refinar la interacción de toda la página.
El modelo específico puede cambiar con el tiempo. De hecho, cambia constantemente. Por eso conviene aprender el proceso detrás: cómo definir una referencia, cómo dar restricciones, cómo corregir una composición y cómo dividir un proyecto grande en partes controlables.
Si quieres revisar prompts usados para este tipo de proyectos, puedes consultar la colección de prompts del proyecto. Para trabajar prompts más profesionales enfocados en creación de apps, también está disponible Primera App.
💡 Cuándo tiene sentido usar una web animada con IA
No todas las páginas necesitan una isla flotante, un recorrido de dron o 120 frames controlados por scroll.
Para un negocio local que solo necesita explicar sus servicios, mostrar horarios, responder dudas y conseguir contactos, probablemente una web mucho más sencilla sea la mejor opción. Más rápida, más directa y más fácil de mantener.
Pero en ciertos contextos, una experiencia visual más ambiciosa puede tener mucho sentido:
- Lanzamientos de productos.
- Campañas de marca.
- Proyectos inmobiliarios.
- Presentaciones de arquitectura y diseño.
- Portafolios creativos.
- Marcas premium donde la percepción visual es parte del producto.
La clave no es añadir efectos porque sí. La clave es hacer que el formato refuerce la historia que la marca quiere contar. En una constructora de lujo, entrar lentamente a una residencia, recorrer sus espacios y destacar sus detalles puede ser una forma muy potente de comunicar valor.
✅ Un proceso replicable para crear landing pages premium con IA
Si quieres aplicar esta metodología en otro proyecto, no necesitas copiar esta estética ni usar exactamente las mismas herramientas. Puedes seguir esta secuencia:
- Define el objetivo de la página. Decide si necesita informar, vender, presentar una campaña o construir percepción de marca.
- Busca una referencia suficiente. No esperes la imagen perfecta. Encuentra una que permita decidir composición, atmósfera y dirección.
- Parte desde una estructura sólida. Utiliza un sistema, una plantilla o una sección con buena tipografía y jerarquía.
- Genera recursos visuales según su uso final. Piensa en recortes móviles, posición del texto, contraste y espacio negativo.
- Indica con precisión qué puede moverse. Especialmente al generar video con IA, define cámara, elementos móviles, loop y restricciones.
- Integra una parte a la vez. Termina el héroe antes de construir el catálogo. Valida el catálogo antes de crear la interacción más compleja.
- Corrige con instrucciones específicas. Reduce tamaño, sube el contenido, aumenta contraste, agrega aire, quita elementos. No pidas rehacer todo si no es necesario.
- Reduce la animación secundaria. Si una interacción ya tiene protagonismo, deja que el resto de la interfaz acompañe.
- Prueba el recorrido completo. Avanza, retrocede, revisa jerarquías, legibilidad y coherencia entre imagen y contenido.
Crear webs con IA no se trata de reemplazar el criterio creativo. Se trata de ejecutar más rápido las ideas cuando se aprende a dirigir bien el proceso.
🌱 Recursos para seguir creando con IA
Para profundizar en creación de apps y experiencias web mediante inteligencia artificial, puedes unirte a la comunidad de Vibe Coding, donde se comparten recursos y aprendizajes sobre este tipo de procesos.
Y si tienes un proyecto visual, una landing page, una app o una experiencia digital que quieras desarrollar con este enfoque, puedes enviar una solicitud para trabajar en tu proyecto.
La tecnología permite crear cosas cada vez más complejas en menos tiempo. Pero el resultado que realmente se siente premium sigue apareciendo cuando alguien decide qué merece moverse, qué debe mantenerse quieto, qué sobra y qué historia vale la pena construir.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.