Una imagen de montañas, un valle y un viajero mirando al horizonte puede convertirse en algo bastante más interesante que un fondo bonito. Puede dar vida a una portada y, unos centímetros más abajo, transformarse en un recorrido donde la cámara gira a medida que avanzas por la página.
Ese era el objetivo de esta web: crear una experiencia visual con personalidad, sin convertirla en una colección de efectos que compitan entre sí. En la portada, el paisaje se mueve suavemente mientras puedes leer. En el segundo bloque, el movimiento depende de tu desplazamiento. Después, las imágenes dan paso a secciones claras, con espacio para rutas conceptuales, preparación y preguntas.
Lo importante no fue conseguirlo todo con un único prompt. Fui construyendo el resultado por etapas: primero la composición, después el movimiento y, finalmente, el resto del contenido. Cada cambio respondía a algo concreto que aparecía en el diseño.
Crear una web cinemática con IA consiste tanto en decidir qué añadir como en saber qué conservar y qué quitar.
Tabla de contenidos
- 🧰 Las herramientas y el papel de cada una
- 🏗️ Empieza por una composición, no por todos los efectos
- 🪟 Quita las capas que ocultan el paisaje
- 🖼️ Prueba la imagen exacta antes de generar el vídeo
- 🌬️ Anima la portada sin mover la cámara
- 🏞️ Genera imágenes relacionadas, pero con perspectivas distintas
- 🧭 Construye el resto de la web y ajusta lo que comunica
- ✨ Añade movimiento a la interfaz con moderación
- 🧹 Limpia el diseño y dale espacio para respirar
- 🎥 Diseña un recorrido de cámara para el desplazamiento
- 🎞️ Convierte el vídeo en una secuencia controlada por el scroll
- 💬 Acompaña el recorrido sin tapar su centro
- 📱 Revisa la página completa y la versión móvil
- 🔗 Prompts, productos y recursos para continuar
🧰 Las herramientas y el papel de cada una
Para este proyecto combiné varias herramientas, pero no intenté que todas hicieran lo mismo. Cada una resolvía una parte del proceso.
- Google AI Studio con Gemini: fue el entorno donde empecé la aplicación y fui construyendo y modificando la web mediante instrucciones.
- Dínamo Sites: me proporcionó una sección de partida con una composición que encajaba con la idea.
- Flow: lo utilicé para generar los vídeos a partir de la imagen original, tanto el fondo animado como el recorrido de cámara.
- ChatGPT: me ayudó a crear otras perspectivas y ambientes relacionados con la referencia visual.
- Cloudinary: lo utilicé para alojar el vídeo de la portada y obtener un enlace que pudiera incorporar al proyecto.
La imagen original era el punto de unión. No quería una portada con una estética y unas secciones inferiores completamente desconectadas. Quería que todo pareciera pertenecer a una misma idea, aunque hubiera montañas, río y costa.
También separé dos tipos de trabajo: generar los recursos visuales y decidir cómo se integraban en la interfaz. Tener un buen vídeo no resuelve automáticamente dónde colocar el título, cuánto espacio dejar o cómo organizar las preguntas. Esas decisiones había que revisarlas dentro de la página.
🏗️ Empieza por una composición, no por todos los efectos
Abrí una aplicación nueva en AI Studio. Ya tenía la imagen del paisaje que quería utilizar, pero antes de animarla necesitaba comprobar si funcionaría con una interfaz encima.
Por eso fui a Dínamo Sites, una biblioteca de secciones para crear webs, y elegí el diseño Cosmos Creative. Su fondo original era espacial, con un planeta, pero eso no era lo que me interesaba. Me fijé en la distribución: el título a la izquierda y los elementos de apoyo a la derecha.
Esa estructura podía funcionar bien con el paisaje. La idea era aprovecharla y cambiar el contenido, no conservar la temática espacial.
Copié el prompt de la sección y lo llevé a AI Studio. Antes de ejecutarlo, eliminé el bloque que pedía subir el vídeo y dejé los enlaces de los recursos para que pudiera utilizarlos directamente. Después pulsé el botón de construcción y revisé el resultado.
En esta primera pasada mantuve el diseño original. Todavía aparecían el planeta y los textos iniciales. Preferí ver qué hacía Gemini con esa base antes de pedirle una transformación completa.
Esto me permitió distinguir dos cosas: la composición sí me servía, pero algunos tratamientos visuales no. Si hubiera cambiado el fondo, los textos, la estructura y las animaciones de una sola vez, habría sido más difícil identificar qué parte necesitaba corregir.
Una buena primera versión no tiene que parecerse al resultado final. Tiene que permitirte evaluar la estructura que vas a conservar.
🪟 Quita las capas que ocultan el paisaje
La primera construcción añadió paneles de apariencia cristalina. Ocupaban bastante superficie y cubrían el fondo. Podían encajar en una interfaz espacial, pero para este paisaje quería algo más abierto.
No necesitaba rehacer la sección. El título estaba donde lo quería y los elementos laterales también. Solo había que retirar las superficies que se interponían entre el contenido y la imagen.
La instrucción tenía un alcance muy concreto:
- Eliminar los fondos de cristal de paneles y tarjetas.
- Quitar desenfoques, bordes y sombras asociados a esas superficies.
- Conservar textos, tipografías, botones y posiciones.
- No modificar la distribución ni el vídeo de fondo.
Así, los textos quedaron directamente sobre la escena. El cambio fue importante porque recuperé espacio visual sin perder la composición que ya había validado.
Al trabajar con IA, no basta con explicar qué no te gusta. Conviene indicar también qué no debe cambiar. Aquí no estaba pidiendo otra propuesta de diseño, sino una limpieza específica.
Ese criterio acompañó todo el proyecto. Cuando algo funcionaba, lo incluía entre los elementos que debían mantenerse en la siguiente modificación.
🖼️ Prueba la imagen exacta antes de generar el vídeo
El siguiente paso fue sustituir el fondo espacial por mi imagen. Aquí fui especialmente preciso: quería utilizar el archivo adjunto, no una interpretación inspirada en él.
La diferencia parece pequeña, pero cambia completamente el resultado. Si la IA genera unas montañas parecidas, desplaza al viajero o modifica los colores, ya no estoy comprobando la composición que elegí. Estoy evaluando otra imagen.
Por eso pedí reemplazar únicamente el vídeo del planeta por el archivo adjunto, utilizarlo tal cual y mantenerlo estático. Nada de regenerarlo, retocarlo, cambiar sus elementos o añadirle efectos. También insistí en conservar los textos, las tipografías, los botones y sus posiciones, sin recuperar los paneles de cristal.
Con esta prueba pude revisar cuestiones que el movimiento no debía esconder:
- Si el título se leía sobre el paisaje.
- Cuánta imagen quedaba visible.
- Si los elementos de apoyo ocupaban demasiado espacio.
- Si la posición del viajero seguía teniendo sentido dentro de la composición.
Preferí resolver todo eso antes de crear el vídeo. Si todavía necesitaba mover algún elemento de la interfaz, podía hacerlo sobre la imagen fija.
La imagen estática era una prueba de diseño, no un paso provisional sin importancia. Me permitía validar la relación entre fondo y contenido sin sumar otra variable.
🌬️ Anima la portada sin mover la cámara
Una vez que la imagen funcionaba dentro de la web, pasé a Flow con el mismo archivo original. Para la portada buscaba movimiento ambiental: viento en la vegetación, nubes desplazándose y algo de movimiento natural en el hombre.
No necesitaba que la cámara recorriera todo el lugar. En esta sección había que leer un título y encontrar un botón. Un fondo demasiado cambiante podía quitarle estabilidad a esa lectura.
La primera prueba me enseñó algo útil. Cuando restringí demasiado la animación, la escena quedó casi congelada. No se trataba de pedir ausencia de movimiento, sino de definir qué debía moverse y qué debía permanecer quieto.
Ajusté la petición para incluir:
- Respiración natural del viajero.
- Viento más perceptible en las plantas.
- Nubes moviéndose claramente por el valle.
- Una sensación de brisa real.
- Cámara fija y repetición fluida.
La nueva versión tenía más vida sin perder el encuadre. Me fijé especialmente en el personaje: con las nubes en movimiento, resultaba evidente si él permanecía completamente inmóvil. La respiración ayudaba a integrarlo en la escena.
Elegí esa versión y guardé el vídeo. Después lo subí a Cloudinary, copié su enlace y volví a AI Studio para sustituir la imagen estática por el clip.
Lo dejé sin sonido. No buscaba introducir una pieza audiovisual independiente, sino utilizar el movimiento como parte del diseño.
La portada ya tenía su comportamiento: el vídeo se reproducía y el entorno acompañaba la lectura. Más adelante, el recorrido tendría otra lógica. Mantener esa diferencia fue fundamental para no repetir el mismo efecto en toda la página.
🏞️ Genera imágenes relacionadas, pero con perspectivas distintas
La web no podía quedarse en una portada animada. Necesitaba material para las siguientes secciones, así que utilicé el paisaje como referencia en ChatGPT y pedí otras vistas.
Quería continuidad visual, pero no varias imágenes del mismo monte tomadas desde casi el mismo sitio. La primera variación seguía demasiado cerca del punto de vista original. La guardé, aunque todavía necesitaba una escena que aportara algo diferente.
Después pedí otra perspectiva del valle. Aparecieron el río en primer plano, un puente y el viajero. Esa composición daba otra escala al lugar: ya no era solo una mirada desde un mirador, sino un entorno que se podía imaginar recorriendo.
También generé una escena costera, con playa, un pueblo y montañas al fondo. Seguía dentro de la misma idea visual, pero añadía variedad suficiente para distribuirla por la página.
Insistí en un acabado de alta calidad y aspecto cinemático porque algunas versiones parecían más cercanas a una acuarela. No era el tratamiento que buscaba.
La continuidad no dependía de repetir exactamente el encuadre. Dependía de que las imágenes mantuvieran una relación reconocible y un acabado compatible.
Guardé los archivos y los subí directamente al proyecto. Con ese material podía ampliar la web sin llenar cada bloque con la misma escena. La portada conservaba su protagonismo y las secciones inferiores empezaban a tener contenido visual propio.
🧭 Construye el resto de la web y ajusta lo que comunica
Con las nuevas imágenes, amplié el sitio. Aparecieron las rutas, un bloque para preparar el viaje, las preguntas y un selector entre montaña, valle y costa. También adapté el nombre y los textos a Horizonte.
Hasta ese momento había dedicado casi toda la atención a la portada. Ahora necesitaba bajar por la página y comprobar cómo funcionaban las imágenes y los textos en los bloques siguientes.
Esta revisión no era solo estética. Había una cuestión importante: se trataba de una web conceptual. Las imágenes no representaban una ruta real que estuviera ofreciendo para reservar.
Por eso ajusté los textos para que no sonaran como datos confirmados de una excursión. La página podía sugerir ambientes y experiencias, pero no debía presentar esa ficción visual como una oferta real.
Cuando generas una web con IA, el contenido también necesita dirección. Una sección puede parecer convincente y, aun así, comunicar algo que no corresponde al proyecto.
En este caso, las rutas servían para imaginar distintos caminos y el selector permitía explorar atmósferas. Esa era la intención que debía reflejar el lenguaje.
La revisión completa me ayudó además a detectar una tendencia que se repetiría: al añadir secciones, la interfaz empezaba a acumular tarjetas, indicadores y pequeñas cajas. Tener más contenido no significaba que hubiera que enmarcarlo todo.
✨ Añade movimiento a la interfaz con moderación
El paisaje de la portada ya estaba animado, pero quería que la interfaz también respondiera al uso. Los títulos, botones, imágenes y preguntas podían tener pequeñas transiciones sin competir con el fondo.
Pedí animaciones fluidas para distintos momentos de interacción:
- Entrada de títulos y textos al avanzar por la página.
- Movimiento ligero en imágenes y tarjetas al pasar el cursor.
- Respuesta de los botones al interactuar con ellos.
- Transiciones al abrir el menú y los elementos desplegables.
- Apertura y cierre suaves en las preguntas.
También marqué los límites: un acabado cinemático, sin exageraciones y sin mover la página entera. Las imágenes debían mantenerse como estaban y había que respetar las preferencias de reducción de movimiento.
Eso último formaba parte del diseño, no era un detalle separado. Si pedía animaciones para toda la interfaz, tenía sentido incluir desde el principio cómo debían comportarse cuando se prefiriera menos movimiento.
Lo que buscaba era una respuesta perceptible, no un espectáculo constante. El paisaje ya atraía bastante la atención. No necesitaba que todos los elementos entraran, flotaran o cambiaran a la vez.
El movimiento suave era suficiente. Un botón que responde y una pregunta que se abre con claridad aportan más a esta experiencia que una animación llamativa sin función.
Con eso, la web empezó a sentirse más conectada: el fondo tenía vida y los controles respondían. Pero todavía quedaba trabajo de limpieza.
🧹 Limpia el diseño y dale espacio para respirar
Al ampliar el sitio, la página se había cargado demasiado. Había paneles, iconos, pequeños recuadros e indicadores que no aportaban nada a la idea de Horizonte.
Pedí una limpieza con objetivos específicos: reducir adornos, añadir espacio vacío, priorizar las imágenes y eliminar etiquetas técnicas como las de emisión en directo, calidad HD o repetición.
Esos elementos podían describir el recurso utilizado, pero no ayudaban a entender la propuesta de la web. El paisaje no necesitaba llevar una ficha técnica encima.
También pedí que las rutas tuvieran un tratamiento más editorial, sin encerrar todos los textos y las imágenes en tarjetas. Había que acortar el contenido y conservar únicamente lo que aportara valor.
De nuevo, protegí lo que ya funcionaba: la composición de la portada, las tipografías, las imágenes y las animaciones suaves.
La primera limpieza abrió las imágenes, pero todavía faltaba aire. Casi toda la página seguía siendo una gran fotografía o un fondo oscuro. Las secciones se mezclaban demasiado.
Hice una segunda petición: alternar los bloques visuales con fondos blancos y azul muy claro, utilizar textos oscuros y ampliar los márgenes. Las rutas, la preparación y las preguntas necesitaban su propio espacio.
Ese cambio hizo más legible el conjunto. Antes, la web parecía formada por dos masas grandes: la portada y las imágenes inferiores. Con las zonas claras, el resto del contenido empezó a distinguirse.
Una web cinemática no tiene que ser oscura de principio a fin. Aquí, los fondos claros ayudaron precisamente a que las escenas destacaran más y a que la lectura tuviera un ritmo diferente.
🎥 Diseña un recorrido de cámara para el desplazamiento
Quedaba una sección que no terminaba de convencerme. El segundo bloque alternaba imágenes como unas diapositivas. Funcionaba, pero quería una experiencia más interesante: que la cámara girara y que el avance dependiera de cuánto bajara por la página.
Volví a Flow y adjunté otra vez la imagen original. Esta vez pedí un vídeo de diez segundos. Necesitaba un trayecto más largo que el movimiento ambiental de la portada.
La petición definía una sola toma continua, con la cámara girando lentamente unos setenta grados alrededor del mirador y del viajero, de izquierda a derecha. Tenía que revelar otra perspectiva del valle.
No bastaba con decir “hazlo cinemático”. Quería que el cambio de ángulo y profundidad fuera evidente. Por eso especifiqué que las rocas cercanas debían desplazarse más rápido en la imagen que las montañas lejanas.
Ese contraste ayudaba a describir una rotación real de cámara, no un simple acercamiento. También pedí mantener la escena, la iluminación y el personaje, con viento en la hierba y movimiento natural.
Las restricciones eran igual de importantes:
- Sin cortes entre planos.
- Sin diapositivas ni fundidos.
- Sin sustituir el giro por un zoom.
- Con un inicio y un final claramente diferentes.
- Sin plantearlo como un bucle.
La última condición respondía al uso que iba a darle. Al bajar, quería recorrer la escena; al subir, regresar por el mismo trayecto.
El resultado empezaba con las montañas a un lado y abría la perspectiva hacia el mar. Ahora sí había un cambio visual que merecía vincular al desplazamiento.
🎞️ Convierte el vídeo en una secuencia controlada por el scroll
Guardé el vídeo y lo subí directamente a AI Studio. Para este bloque quería trabajar con una secuencia de fotogramas, de manera que pudiera avanzar, retroceder o permanecer en un punto según el desplazamiento por la página.
Pedí sustituir la segunda sección de diapositivas por el recorrido generado y convertir el vídeo en imágenes, manteniendo todos sus fotogramas, la resolución original y una calidad alta.
El comportamiento debía quedar claro: avanzar al bajar, retroceder al subir y no reproducirse automáticamente. Tampoco quería que se modificaran las imágenes durante la conversión.
Además, pedí separar el recorrido de la portada mediante una entrada blanca amplia, un título breve y espacio vacío. Después, la escena debía permanecer fija en pantalla durante su tramo de desplazamiento, con muy poco texto.
Así quedaron dos movimientos diferentes dentro de la misma web:
- Portada: el vídeo se reproduce automáticamente y aporta ambiente.
- Recorrido: la posición de la escena depende del avance por la página.
Si dejo de desplazarme, el recorrido se queda en ese punto. Si vuelvo hacia arriba, recupero la perspectiva anterior. Esa respuesta es lo que convierte el bloque en una experiencia controlada, no en otro vídeo de fondo.
Probé ambas direcciones. La cámara avanzaba hacia el mar al bajar y regresaba a las montañas al subir. La separación blanca también ayudaba a entender que estaba entrando en una sección con otra lógica.
Hay un matiz importante: convertir el vídeo en fotogramas no mejora por sí mismo su calidad visual. Conservar la resolución y las imágenes evita alterar innecesariamente el material, pero el resultado sigue dependiendo del vídeo que hayas generado.
La secuencia me daba control sobre el recorrido. La calidad del paisaje seguía viniendo del recurso original.
💬 Acompaña el recorrido sin tapar su centro
Una vez que el giro funcionaba, faltaba una pequeña capa de texto. No quería dejar la sección completamente vacía, pero tampoco cubrir al viajero o explicar cada instante del movimiento.
Pedí tres frases breves relacionadas con el avance: la apertura del camino, otra forma de mirar y la llegada al mar. Debían alternarse entre el lado izquierdo y el derecho, entrando y saliendo suavemente con el desplazamiento.
La condición principal era que no ocultaran al personaje ni ocuparan el centro. La composición necesitaba conservar ese espacio para que el recorrido siguiera siendo el protagonista.
También eliminé el contador de fotogramas, las etiquetas técnicas y el texto que aparecía en la parte inferior. Ya había comprobado que el sistema funcionaba. Esos indicadores no tenían por qué formar parte de la experiencia final.
En esta fase no pedí cambiar la animación. Pedí mantener el giro y ajustar únicamente el contenido que lo acompañaba.
El resultado era más limpio: las frases aparecían a los lados, el viajero seguía visible y la escena podía abrirse hacia el mar sin obstáculos.
Esta separación entre comprobación y presentación fue útil. Primero validé el comportamiento; después retiré lo que solo servía para revisarlo.
📱 Revisa la página completa y la versión móvil
El resultado final tenía una estructura reconocible: portada con fondo animado, recorrido ligado al desplazamiento, rutas visuales, bloques claros para preparación y preguntas, y un selector de ambientes.
Todo partía de la misma referencia, pero cada sección tenía su propio espacio. No intentaba repetir la intensidad de la portada en cada bloque.
Revisé también la presentación móvil. La portada se adaptaba al formato estrecho y podía continuar hacia el recorrido y el resto del contenido. Esa comprobación formaba parte del cierre, no bastaba con que la versión de escritorio resultara convincente.
Para repetir el proceso, este es el orden que seguiría:
- Elegir una referencia visual y una composición de partida.
- Construir la base y comprobar su distribución.
- Retirar las capas que cubren demasiado el fondo.
- Validar la imagen exacta con los textos encima.
- Generar e integrar el movimiento ambiental de la portada.
- Crear imágenes relacionadas y ampliar el contenido.
- Añadir respuestas suaves a la interfaz.
- Limpiar adornos y separar las secciones con espacio.
- Generar el giro de cámara y vincularlo al desplazamiento.
- Ajustar los textos laterales y revisar el conjunto en móvil.
🔗 Prompts, productos y recursos para continuar
He reunido los pasos y prompts del proyecto para que puedas seguir las modificaciones con más detalle. Lo más útil es acompañar esas instrucciones con una revisión de cada resultado, no ejecutarlas sin comprobar qué está cambiando.
En mi comunidad de creación con IA encontrarás los recursos del proyecto, incluidas las imágenes, los vídeos y el código de esta web.
Si quieres continuar trabajando con instrucciones para construir aplicaciones, también tienes Primera App, con prompts profesionales para crear tu app. Y, para el alojamiento de tus proyectos, te dejo mi enlace de descuento de Hostinger.
La idea que me llevo de este proyecto es sencilla: no hace falta pedir una web espectacular de golpe. Hace falta dirigir el proceso. Primero conseguir una composición que funcione, después darle vida y, finalmente, dejar que cada sección tenga el espacio que necesita.
El acabado cinemático apareció al combinar movimiento, continuidad visual y limpieza. La IA generó y construyó, pero el resultado se fue definiendo con cada decisión: qué debía moverse, qué debía permanecer igual y qué sobraba.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
