Una web cinemática no necesita tener movimiento en todas partes. Necesita una buena imagen, una composición que deje respirar al contenido y animaciones que acompañen lo que queremos contar. Para esta web de turismo en Brasil, esa fue la idea: mostrar el paisaje, transmitir la experiencia del paseo y terminar con una consulta fácil de preparar.
El proyecto se llama Jeribuggy y está pensado para paseos en buggy por Jericoacoara. Lo fui construyendo por partes: primero preparé la imagen, después adapté una base de diseño, generé dos videos con comportamientos distintos y completé la página con una escena interactiva, preguntas frecuentes y un formulario de consulta.
Este es el flujo que utilicé para crear la web con IA, dentro del trabajo con Gemini 4 y Antigravity. Flow me sirvió para generar los recursos visuales, y el navegador integrado de Antigravity me permitió revisar el resultado mientras avanzaba. Al final, publiqué los archivos en mi hosting para tener un enlace listo para compartir.
Tabla de contenidos
- 🧭 La estructura: del paisaje a una consulta concreta
- 🖼️ Preparar una imagen que funcione como portada
- 🎨 Elegir una base visual en Dínamo Sites
- 🌬️ Animar la portada en Flow sin distraer de la lectura
- 🎬 Crear un segundo video para descubrir el paisaje
- 🖱️ Convertir el video en una secuencia controlada por el scroll
- 👥 Añadir una sección de experiencia con una imagen recortada
- 🏝️ Crear un selector de paisajes interactivo con Three.js
- 📝 Completar la página con preguntas frecuentes y consulta
- ✨ Pulir las transiciones y revisar la versión móvil
- 🚀 Publicar la web en Hostinger con un dominio temporal
- 🧰 Recursos para repetir el método en tu propia web
🧭 La estructura: del paisaje a una consulta concreta
No intenté resolver toda la página con una sola petición. Empecé por una sección que me gustaba y fui sumando el resto sin perder su estilo. Eso me permitió tomar decisiones sobre resultados concretos, en lugar de pedir una web enorme y después intentar corregir todo al mismo tiempo.
La estructura final quedó organizada así:
- Portada con video en bucle: presenta el destino y el paseo con un movimiento suave.
- Sección de experiencia: cambia el ritmo visual y muestra un grupo de amigos con el buggy recortado.
- Recorrido controlado por el desplazamiento: abre el paisaje de dunas y lagunas mientras aparecen textos breves.
- Selector de paisajes en 3D: permite elegir entre dunas, lagunas o atardecer.
- Preguntas frecuentes: ayuda a preparar el paseo antes de contactar.
- Consulta final: reúne la fecha, el número de personas y la opción elegida.
Cada bloque tiene una función. La portada invita, la experiencia explica, el recorrido muestra y el selector ayuda a elegir. Después, la consulta recoge esa elección. El movimiento no queda separado del contenido: forma parte del recorrido por la página.
🖼️ Preparar una imagen que funcione como portada
Comencé buscando una referencia en Pinterest. Encontré una fotografía con tres elementos que me servían mucho: un buggy amarillo, una viajera y el paisaje de fondo. Me gustaba el encuadre, pero había un problema práctico: la foto era vertical y yo necesitaba una imagen horizontal.
Además, no bastaba con cambiar la proporción. En la parte superior iban a estar el título y el menú, así que necesitaba bastante cielo libre. Si el buggy y la persona ocupaban toda la composición, los textos iban a competir con ellos.
Me llevé la referencia a Flow y pedí una nueva imagen con estas condiciones:
- Formato horizontal 16:9.
- El buggy, la viajera y la composición general como referencia visual.
- Una escena luminosa, atractiva y con acabado fotográfico profesional.
- El vehículo y la persona ubicados en la parte inferior.
- Bastante espacio de cielo en la zona superior.
La petición, adaptada para reutilizarla, sería:
Genera una imagen horizontal 16:9 a partir de esta referencia. Mantén la idea del buggy y de una viajera disfrutando del paseo, con luz clara y acabado fotográfico. Sitúa los elementos principales más abajo y deja una zona amplia de cielo despejado para colocar el título y la navegación.
El resultado ya tenía una composición útil para la web. El buggy y la viajera quedaban abajo, mientras que arriba había espacio para escribir sin tapar lo importante. Esa decisión inicial también me servía para el siguiente paso: animar la imagen conservando el encuadre.
Para mí, esta es una parte clave del método: generar el recurso pensando en el lugar que ocupará. Una imagen puede quedar muy bien por sí sola y, aun así, resultar incómoda como fondo de una portada.
🎨 Elegir una base visual en Dínamo Sites
Con la imagen lista, fui a Dínamo Sites, mi biblioteca de secciones, referencias y prompts para crear webs. Estuve recorriendo varios diseños y elegí uno llamado Ruta Salina.
Lo que me interesaba era su composición: las fuentes, la distribución de los textos y la manera de trabajar con un video de fondo. Esa base ya resolvía una dirección visual. Mi tarea no era inventar otra desde cero, sino adaptarla al proyecto de turismo.
Copié el prompt de la sección y lo pegué en una conversación nueva de Antigravity. Primero lo ejecuté sin modificarlo. Quería comprobar cómo quedaba el diseño original antes de empezar a cambiar imágenes y contenido.
El navegador integrado me permitió revisar la sección dentro del mismo entorno. Ya podía ver la composición funcionando, no solo imaginarla a partir de una descripción. Con esa base validada, le pasé la imagen del buggy y pedí la adaptación a Jeribuggy.
Adapta esta portada para Jeribuggy, una web de paseos en buggy en Jericoacoara, Brasil. Utiliza la imagen adjunta como fondo y conserva la composición y las fuentes. Reescribe los textos en español para invitar a descubrir las dunas y lagunas de Jeri.
La instrucción más importante era conservar lo que ya funcionaba. Cambiar de destino no exigía cambiar también la tipografía, la jerarquía y la distribución. Una referencia sirve más cuando identificamos qué queremos mantener de ella.
🌬️ Animar la portada en Flow sin distraer de la lectura
En el mismo mensaje de adaptación le pedí a Antigravity un prompt sencillo para animar la imagen en Flow. Para esta primera pieza elegí seis segundos y una cámara completamente fija.
No quería un recorrido de cámara en la portada. Como el título iba encima, preferí que solo se movieran el pelo, las nubes y algún gesto natural de la viajera. La escena debía sentirse viva, pero seguir siendo un fondo cómodo para leer.
Definir tanto el movimiento como sus límites
En una animación así conviene aclarar qué puede moverse y qué debe quedarse quieto. Mi petición incluía:
- Cámara fija: sin acercamientos, giros ni desplazamientos laterales.
- Brisa suave: movimiento natural en el cabello.
- Gestos mínimos: respiración y pequeños movimientos de cabeza y hombros, sin cambiar de postura.
- Fondo tranquilo: nubes desplazándose muy lentamente.
- Buggy inmóvil: el vehículo no debía moverse.
- Repetición continua: buscar una unión limpia entre el final y el inicio.
- Sin audio.
Anima esta imagen con la cámara inmóvil, como si estuviera sobre un trípode. Una brisa costera mueve suavemente el cabello de la viajera, que mantiene su postura y hace gestos muy pequeños y naturales. Las nubes avanzan despacio y el buggy permanece estático. Busca un movimiento realista y discreto, preparado para repetirse de forma continua y sin sonido.
Cuando estuvo generado, abrí el video y revisé especialmente el cabello, los gestos y la nube del fondo. Esas eran las zonas que había pedido animar, así que ahí tenía sentido concentrar la revisión.
Después descargué la versión en 1080p y volví a Antigravity. Le indiqué que usara ese archivo como fondo de la portada, en bucle y sin sonido, manteniendo los textos y el encuadre. También pedí guardar una copia sin pista de audio para la web.
Con eso ya tenía el primer bloque con movimiento. Era una animación discreta, pensada para acompañar la presentación del destino. El movimiento más dinámico lo reservé para otra sección.
🎬 Crear un segundo video para descubrir el paisaje
El segundo video tenía una función distinta. Ya no necesitaba sostener un título sobre una escena tranquila, sino mostrar un recorrido que se notara al desplazarse por la página.
Le pedí a Antigravity otro prompt para Flow: la cámara debía rodear el buggy estacionado y después ascender sobre las dunas para abrir el paisaje. Todo en una sola toma, con un movimiento más dinámico.
Crea una toma continua que empiece cerca del buggy estacionado. La cámara lo rodea suavemente y luego asciende para revelar un paisaje amplio de dunas y lagunas. Mantén la continuidad del movimiento y deja que el entorno gane protagonismo a medida que se abre el plano.
La secuencia empezaba cerca del vehículo y terminaba mostrando mucho más territorio. Esa transformación era justo lo que necesitaba: al principio reconocemos el buggy; después, el paisaje se convierte en el protagonista.
Esta separación entre los dos videos me ayudó a ordenar la página. En la portada, cámara quieta y movimiento ambiental. En el recorrido, cámara en movimiento y descubrimiento del entorno. No estaba intentando hacer que un mismo recurso resolviera dos necesidades diferentes.
🖱️ Convertir el video en una secuencia controlada por el scroll
Una vez descargado el segundo video, no lo integré como una reproducción convencional. Le pedí a Antigravity que lo convirtiera en una secuencia de imágenes optimizadas y las utilizara en un canvas, una superficie de dibujo dentro de la página.
La instrucción también especificaba que la escena debía permanecer fija mientras avanzábamos por la secuencia. Sobre ella aparecerían textos cortos relacionados con las dunas y las lagunas, conservando las fuentes y el aire del diseño.
Añade una sección de recorrido debajo de la portada usando el video original en 1080p. Extrae una secuencia de fotogramas optimizados y muéstrala en un canvas vinculado al desplazamiento de la página. Al bajar debe avanzar y al subir debe retroceder. Mantén fija la escena durante el recorrido y sincroniza textos breves con sus distintas etapas.
La diferencia entre reproducir y recorrer
Un video normal sigue avanzando por tiempo. Aquí, en cambio, la posición dentro de la página determina qué imagen aparece. El comportamiento queda muy claro:
- Si bajamos, la cámara avanza.
- Si subimos, la cámara retrocede.
- Si dejamos de desplazarnos, la escena se detiene en ese punto.
Esto permite coordinar la lectura con la apertura del paisaje. No hay un video corriendo por su cuenta mientras intentamos leer. La persona que recorre la página controla también el avance visual.
Probé varias veces hacia abajo y hacia arriba. Me interesaba comprobar que cada texto tuviera tiempo suficiente para leerse y que el movimiento funcionara bien en ambos sentidos. No bastaba con que la cámara avanzara de forma atractiva.
El ritmo de lectura es parte de la animación. Si una frase desaparece demasiado pronto, el efecto puede verse bien y aun así resultar incómodo. Por eso revisé el recorrido junto con sus textos, como una sola sección.
👥 Añadir una sección de experiencia con una imagen recortada
Hasta ese momento tenía dos bloques fuertes de paisaje y movimiento. Decidí intercalar una sección más tranquila entre ambos para hablar de la experiencia del paseo y variar el diseño.
Quería mostrar un grupo de amigos con el buggy completo, pero sin otro paisaje detrás. La idea era recortar el fondo para integrar el vehículo y las personas directamente sobre el color claro de la página.
Volví a Pinterest y encontré una referencia grupal con el buggy de perfil y colores vivos. Esa posición me servía porque mostraba el vehículo entero y permitía combinar la imagen con texto sin convertir toda la sección en otra fotografía a pantalla completa.
Pedir un recurso preparado para integrarse
La petición incluía cuatro amigos jóvenes posando de manera natural, el buggy estacionado visto de costado, buena luz y detalles fotográficos. También pedí personas con rasgos propios y un vehículo sin textos ni logotipos.
Usa esta referencia para generar cuatro amigos jóvenes junto a un buggy completo visto de perfil. Conserva la energía, los colores vivos y la luz de la escena, pero crea personas con rasgos propios y elimina cualquier texto o logotipo del vehículo. Quita el fondo y prepara la imagen para integrarla en una sección clara, con bastante espacio y las mismas fuentes de la web.
Pedí la máxima resolución disponible para conservar detalle al ampliar el recurso. Después afiné el recorte y cambié el buggy de amarillo a coral. Ese ajuste introducía una variación de color sin abandonar la idea central del paseo.
El recorte merecía una revisión propia. Una imagen sin fondo no queda integrada automáticamente: hay que comprobar sus bordes, su tamaño y el espacio que ocupa respecto al título. Por eso volví a esta sección durante la revisión final.
También me gustó el cambio de ritmo que aportaba. Después de una portada inmersiva, este bloque permitía detenerse en la experiencia del grupo antes de entrar al recorrido de cámara.
🏝️ Crear un selector de paisajes interactivo con Three.js
Para cerrar el recorrido quería ofrecer una pequeña elección. En lugar de dejar tres opciones únicamente como texto, pedí una escena interactiva con Three.js: un paisaje sencillo integrado sobre el fondo claro de la web.
Las alternativas eran dunas, lagunas y atardecer. Al seleccionar una, debían cambiar tanto la escena como su descripción. Además, esa elección tenía que conservarse para aparecer después en la consulta final.
Añade una sección para elegir entre dunas, lagunas y atardecer. Utiliza Three.js para crear un pequeño paisaje interactivo sobre un fondo claro. Cada opción debe modificar la escena y su descripción, y quedar seleccionada para la consulta final. Mantén el estilo visual y los espacios de la página.
La primera versión incluía un pequeño buggy. Después pedí quitarlo, porque el vehículo ya aparecía en las secciones anteriores. Aquí preferí concentrarme en las dunas, el agua y la luz del atardecer.
También ajusté el encuadre para que el paisaje se viera completo. Era una escena pequeña dentro de una sección con bastante aire, así que no quería que pareciera cortada o demasiado acercada.
Lo importante no era añadir 3D porque sí. La interacción ayudaba a elegir algo que luego tenía utilidad. Si alguien seleccionaba lagunas, esa preferencia llegaba al bloque de consulta. La sección visual y el formulario dejaban de ser piezas independientes.
📝 Completar la página con preguntas frecuentes y consulta
Con el paisaje y la experiencia resueltos, faltaba darle un cierre práctico a la web. Pedí una sección de preguntas frecuentes sobre cómo preparar el paseo y un bloque final para armar una consulta.
La consulta debía recoger tres datos:
- Fecha: cuándo se quiere hacer el paseo.
- Número de personas: cuántas participarían.
- Opción elegida: dunas, lagunas o atardecer.
Por ahora, el botón debía copiar el mensaje con esa información. No lo planteé como una reserva confirmada ni como un envío automático. Era una forma sencilla de dejar preparada la consulta.
También pedí conectar los botones de la portada con este bloque. Así, la invitación inicial llevaba a una acción concreta dentro de la misma página.
Completa la web con preguntas frecuentes para preparar el paseo y una sección final de consulta. Incluye fecha, cantidad de personas y el paisaje seleccionado previamente. El botón debe copiar un mensaje con esos datos. Conecta los botones de la portada con esta sección y revisa que todo el contenido esté en español.
Añadí otra condición editorial: los textos debían hablar de recorridos por caminos permitidos. La imagen puede transmitir amplitud y aventura, pero el contenido también necesita ser claro sobre la propuesta.
Las preguntas frecuentes completaban ese cierre. Su función era despejar dudas antes de contactar, mientras que la consulta reunía las decisiones tomadas durante el recorrido. La página ya no terminaba simplemente después de una animación bonita.
✨ Pulir las transiciones y revisar la versión móvil
Cuando recorrí la web completa encontré un detalle que no me terminaba de convencer. La secuencia de dunas funcionaba bien por sí sola, pero al pasar a la siguiente sección de fondo claro se producía un corte demasiado brusco.
Suavicé esa entrada y salida con un difuminado en los extremos. No buscaba desenfocar toda la escena, sino hacer más natural el paso entre el paisaje y el fondo de la página, manteniendo las imágenes nítidas.
Después envié una petición de revisión centrada en dos puntos: el recorte del buggy y las transiciones entre secciones. Pedí comprobarlas al bajar y al subir. Ese segundo sentido importa especialmente cuando una parte del diseño depende del desplazamiento.
Comprobar el encuadre en una pantalla estrecha
También hice una pasada en la vista móvil del navegador. Una imagen panorámica cambia mucho cuando debe adaptarse a una pantalla vertical. El hecho de que funcione en escritorio no garantiza que el buggy, la viajera y el título sigan bien colocados.
Me fijé en estos aspectos:
- La posición del buggy y de la viajera dentro de la portada.
- El espacio disponible alrededor de los textos.
- El tamaño y la colocación de la imagen recortada.
- La continuidad del recorrido entre secciones.
- El encuadre de la escena interactiva.
Recorrí todas las secciones para valorar el conjunto. Esta revisión no consistía solamente en comprobar que cada pieza existiera, sino en ver cómo convivían. Una web cinemática también necesita pausas, espacio y transiciones cuidadas.
🚀 Publicar la web en Hostinger con un dominio temporal
Hasta aquí, el proyecto funcionaba en mi computador. El siguiente paso era subirlo al hosting para obtener una dirección pública que pudiera compartir con un cliente o añadir a mi portafolio.
La web estaba construida con HTML, CSS y JavaScript puro. Para este proyecto, la publicación consistió en subir los archivos de la página y sus recursos, sin añadir una aplicación de servidor.
Entré en el panel de Hostinger y creé un sitio nuevo mediante la configuración manual, utilizando un dominio temporal. Después preparé un archivo ZIP con la página y la carpeta de medios.
Dentro de esa carpeta iban los recursos que habíamos creado durante el proceso:
- El video en bucle de la portada.
- Las imágenes utilizadas en las secciones.
- Los fotogramas de la secuencia controlada por el desplazamiento.
Subí el ZIP, esperé a que terminara el proceso y abrí la dirección pública. El dominio temporal me permitía mostrar la web sin conectar un dominio propio en ese momento.
Si quieren publicar sus proyectos, pueden comparar las opciones desde mi enlace de descuento de Hostinger. Elijan el plan que tenga sentido para lo que van a crear. Si contratan desde ese enlace, también apoyan mi trabajo.
Con la dirección pública abierta, ya tenía el recorrido completo listo para compartir: portada animada, experiencia, secuencia de dunas y lagunas, selector 3D, preguntas frecuentes y consulta.
🧰 Recursos para repetir el método en tu propia web
Si quieren seguir el proceso con una base más concreta, dejé los pasos y prompts adaptados para construir su propia versión. Lo útil no es copiar únicamente la apariencia final, sino entender por qué cada recurso ocupa ese lugar.
En mi comunidad de creación con IA también encontrarán el código y los recursos de esta web. Y, si además están trabajando en una aplicación, pueden consultar los prompts profesionales de Primera App.
Mi forma de repetir este flujo sería mantener el mismo orden: definir primero la imagen y su composición, validar una base visual, añadir el movimiento según la función de cada bloque y completar después la interacción y la consulta. Por último, revisar transiciones, móvil y publicación.
Lo que más me gustó del resultado es que no surgió de pedir muchos efectos a la vez. Partí de una sección que tenía una dirección clara y fui construyendo alrededor de ella. La portada invita a conocer Jeri, el recorrido abre el paisaje y la consulta convierte esa exploración en una intención concreta. Ahí es donde el diseño, la animación y la utilidad empiezan a trabajar juntos.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
