Fluxos · Blog · Una web viva: el tiempo, la marea y la luna reales de Patos, en 3D
Una web viva: el tiempo, la marea y la luna reales de Patos, en 3D
La mayoría de las webs son una foto fija. La nuestra no. Cuando entras en fluxos.es ves la playa de Patos (Nigrán) reconstruida en 3D, y esa escena cambia en tiempo real según lo que de verdad está pasando ahí fuera: el tiempo, la marea, la posición del sol y hasta la fase de la luna. Si en Patos llueve, en la web llueve. Si la marea está baja, la web descubre arena. Si es de noche, sale la luna y los dos socios encienden una hoguera.
Este es el primer artículo del blog y queríamos dedicarlo a explicar qué hace diferente a esta web y cómo está construida —porque es, en el fondo, una carta de presentación de lo que hacemos: producto digital a medida, con criterio técnico y mimo por el detalle.
Una escena que cambia sola
El corazón de la web es una escena 3D (low-poly, con sombreado tipo cómic) que se dibuja en el navegador con WebGL. Pero lo interesante no es que sea 3D: es que lee datos reales y se adapta a ellos sin que nadie toque nada. Estas son las piezas vivas.
El tiempo, en directo
La escena consulta el clima real de Patos y lo reproduce: el cielo se nubla cuando hay nubes, llueve cuando llueve, el viento encrespa el mar, el oleaje sube cuando el mar está bravo y hasta las Islas Cíes del horizonte se oscurecen cuando el cielo se encapota. Los datos vienen de una API meteorológica abierta y se refrescan solos, así que la web de una mañana gris no se parece a la de una tarde despejada.
Y aquí una confesión que lo explica todo: los dos somos surfistas. Un surfista vive pendiente del parte —el viento, la mar de fondo, la marea, las nubes— para adivinar si hoy entrarán olas que merezcan la pena. Esa costumbre de mirar el cielo y el mar antes de coger la tabla es, en el fondo, la que se nos coló en la web: nos obsesionan las condiciones. Y Patos es nuestra playa, así que tenía todo el sentido que el sitio las vigilara igual que las vigilamos nosotros.
Las mareas (y el guiño a la luna)
La orilla se mueve con la marea real: en pleamar el agua sube hacia la playa y en bajamar se retira y descubre arena. Y va más allá del sube-y-baja: el recorrido de la marea depende del coeficiente —mareas vivas o muertas—, que es justo el efecto del ciclo lunar. En mareas vivas el agua avanza y retrocede mucho más que en muertas, igual que en la ría de Vigo.
El sol y la luna reales
El cielo sigue la elevación real del sol según la hora y la estación: amanece, se hace de día, atardece y anochece a la vez que en Patos. Y al caer la noche aparece la luna con su fase actual —creciente, cuarto, llena…— dibujada a partir del cálculo astronómico real, junto a las estrellas. No es un adorno genérico: si hoy hay luna menguante, eso es lo que verás.
Sumergirse: hay un fondo marino
La web invita a bajar. Al hacer scroll, la cámara se sumerge y la playa da paso al fondo del mar: la luz cambia, aparecen peces, algas y burbujas. Es una forma de premiar la curiosidad y de contar las cosas por capas, en vez de amontonarlas en una sola pantalla.
Audio generativo
El sonido no es un MP3 en bucle: se genera en directo en el navegador (Web Audio). Las olas, el rumor del fondo y las burbujas se sintetizan y reaccionan a lo que haces —cuanto más te sumerges, más cambia el ambiente sonoro— y al propio clima. Cada visita suena un poco distinta.
Una conversación distinta cada día
En la playa, los dos socios mantienen una charla sobre la actualidad tech en bocadillos de cómic. Esa conversación se regenera sola cada mañana: un proceso recoge los titulares del día y redacta un microdiálogo nuevo. Quien vuelve mañana se encuentra una charla diferente.
Y además, se deja tocar
La escena no es solo para mirar: tiene elementos interactivos que activan acciones. Lanza el palo y el perro sale disparado a por él; toca las tablas de surf clavadas en la arena y los dos socios las cogen y bajan al agua a surfear. Son guiños escondidos para premiar la curiosidad —cosas que se descubren tocando, no leyendo— y que hacen que no haya dos visitas iguales.
Cómo está hecha
Para quien le guste la cocina, estas son las herramientas:
- Three.js y React Three Fiber para la escena 3D en WebGL.
- Astro para un sitio estático rapidísimo: el contenido carga al instante y el 3D entra después, sin bloquear.
- Open-Meteo (clima y mareas) como fuente de datos abierta, cacheada en nuestro backend para no consultarla en cada visita.
- Web Audio API para el sonido generativo.
- Un backend propio (Node + PostgreSQL) para el formulario de contacto y este blog.
Todo cuidado para que rinda bien y sea accesible: la escena limita los cuadros por segundo para no calentar el móvil y, si tienes activado "reducir movimiento" en tu sistema, la web lo respeta.
Por qué lo hicimos así
Podríamos haber puesto una plantilla con una foto de stock. Preferimos que la propia web fuera la demostración: si somos capaces de imaginar y construir algo así para nosotros, podemos hacerlo para tu producto. No es 3D por moda; es enseñar que el detalle, el rendimiento y las ideas originales caben en un sitio web real, en producción y rápido.
Preguntas frecuentes
¿Los datos del tiempo y la marea son reales? Sí. La escena consulta el clima y la marea reales de Patos (Nigrán) y se actualiza sola a lo largo del día.
¿La luna muestra su fase de verdad? Sí. Se calcula la fase lunar actual y se dibuja la luna iluminada en consecuencia (creciente, cuarto, llena, menguante).
¿Funciona en el móvil? Sí. La experiencia está optimizada para móvil y limita el trabajo gráfico para cuidar la batería y la fluidez.
¿No consume muchos recursos? Está pensada para no hacerlo: el contenido carga al instante (es un sitio estático) y la escena 3D entra después, con el ritmo de cuadros limitado.
¿Tiene elementos interactivos? Sí. Puedes lanzar un palo para que el perro vaya a buscarlo o tocar las tablas de surf para que los fundadores bajen al agua a surfear, entre otros guiños escondidos.
¿Podéis hacer algo así para mi negocio? Sí, eso es lo nuestro: producto digital a medida. No tiene por qué ser una playa; la idea es construir algo que sea de verdad tuyo y que funcione.
Esto es sólo la primera capa. Entra en fluxos.es, baja hasta el fondo del mar y vuelve mañana a ver de qué hablan hoy Alberto y Fer.