Sitio completo para una planta de arena, gravilla y chancado, con su logo, hecho por Stratus para una empresa ficticia. En venta para una empresa real.
La idea
Los proveedores de áridos casi no tienen sitio, y los que tienen muestran una foto de un cerro de piedra y un teléfono. Tamizal hace que el material esté en la página: el visitante lo ve caer, apilarse y escurrirse grano por grano.
Cómo está hecho
La arena es una simulación granular de verdad, grano por grano, y es parte de la página: se corre con el scroll y se apoya en lo impreso. Al llegar, una boca de vaciado recorre el título de ida y vuelta y cada letra se llena desde abajo, como un molde; el sobrante resbala y arma dunas sobre la regla. Cada sección tiene su gesto, chico y sin tapar la lectura: cada muestra recibe su propio material y arma su pila, la cinta vacía chancado sobre las letras del título de la planta, la calculadora arma el cono real del volumen pedido (y si se cambia, el piso se abre y se vuelve a llenar), la arena gruesa se asienta sobre las comunas y el pie junta arena sobre su cuenta. Los granos caen acelerando, salpican al llegar y cada material resbala distinto. Un clic deja caer un puñado y la pala del mouse aparta la arena.
Lo que puedes comprobar
- Lighthouse en conceptos.stratus.cl (01-11-2026): 100 en rendimiento, accesibilidad, buenas prácticas y SEO, en celular y en escritorio
- La primera carga pesa 98 KB, con fuentes incluidas, y el hilo principal no se bloquea: 0 ms de bloqueo total (misma medición)
- La arena corre en un worker con OffscreenCanvas: un autómata celular de decenas de miles de granos, cada uno con su material, su tono y su velocidad
- Los granos se apoyan en la página: el borde de cada letra de los títulos, las reglas y el piso de la calculadora se miden en el navegador y se pasan a la simulación
- El título se arma con las posiciones reales de cada palabra, así la arena calza con la letra impresa, y sube con la página al hacer scroll
- La cuenta del pie es la de la simulación: cada grano que nace se suma
- Sin OffscreenCanvas o con movimiento reducido, la página queda impresa y sin arena
Lo técnico
Astro, Autómata celular en un worker con OffscreenCanvas, Lenis, Anybody y Familjen Grotesk.