Sitio completo para una viña de secano, con su logo, hecho por Stratus para una viña ficticia. En venta para una viña real.
La idea
Casi todos los sitios de vino se parecen: una foto de la viña, una botella y un botón de tienda. En Sarmia el vino está en la página misma, como en un mantel: cae, mancha, se queda y se mueve con ella.
Cómo está hecho
El vino es una simulación de fluido real que vive en la página: las manchas se van con el scroll, y de lado con la pista del año, y nada se vierte encima de lo que hay que leer. Al llegar, una gota cae acelerando y se abre en mancha junto al título. En el año en la hilera, de la poda a la vendimia, cada mes recibe su gota. En la bodega, el vino queda dentro del lagar: entra girando, fermenta solo (el gas empuja el sombrero desde abajo) y un clic lo hunde. Las botellas sirven un poco al pasar el mouse y en el mantel del pie cada clic deja el anillo de una copa. El mouse revuelve el vino que ya está, sin agregar.
Lo que puedes comprobar
- Lighthouse en conceptos.stratus.cl (01-11-2026): 100 en rendimiento, accesibilidad, buenas prácticas y SEO en escritorio, y 99, 100, 100 y 100 en celular
- La primera carga pesa 114 KB, con las tres fuentes incluidas (misma medición)
- El vino es una simulación de Navier-Stokes en la GPU, escrita sin librerías: advección, vorticidad y presión resuelta en cada cuadro
- Las manchas se corren con la página de a texeles enteros, para que el scroll no las vaya borroneando
- El color sale de la absorción de la luz en el vino, canal por canal: poco vino tiñe de rosado y mucho llega a morado oscuro; en el borde de cada mancha el pigmento se junta, como en una acuarela
- El lagar es un segundo canal de vino que solo se ve dentro de su círculo
- Sin WebGL 2 o con movimiento reducido, la página queda limpia y el año pasa a una lista vertical
Lo técnico
Astro, Simulación de fluido en WebGL 2, sin librerías, Lenis, Bodoni Moda y Onest.
