Sitio completo para un contratista de sondajes de exploración, con su logo, hecho por Stratus para una empresa ficticia. En venta para una empresa real.
La idea
Un contratista de sondajes vende certeza: que cada metro sale del pozo, se mide y llega a su caja sin perder testigo. Hondal hace de eso el recorrido de la página: bajar es perforar.
Cómo está hecho
La intro perfora hasta 750 metros mientras el nombre aparece letra por letra y después sube con el testigo hasta la superficie, donde esperan tres cajas de testigos. Al bajar, la cámara recorre un corte geológico con el pozo partido por la mitad: la roca del testigo cambia con la profundidad (gravas, zona lixiviada, óxidos, enriquecimiento y sulfuros) y cada capa es un capítulo. Al llegar al fondo, el pozo se gira y se vuelve la hoja del registro, con la recuperación y el RQD de cada corrida; después viene la faena, con la sonda al atardecer que pasa a la noche. Desde la luz de la torre se abre el mapa: el relieve real del norte de Chile se levanta del papel y la cámara vuela a cada campaña. Al final, una calculadora convierte metros en corridas, cajas y turnos.
Lo que puedes comprobar
- Lighthouse en conceptos.stratus.cl (31-10-2026, ya con el mapa): 100 en rendimiento, accesibilidad, buenas prácticas y SEO en escritorio, y 94 en rendimiento con 100 en lo demás en celular (tres mediciones de cada uno)
- La primera carga pesa 325 KB en celular, con imágenes y fuentes incluidas (misma medición)
- El 3D corre en tres workers con OffscreenCanvas, uno por escena, y no traba la página: a 3440 x 1440, en un equipo con GTX 1070, el pozo se mantuvo entre 75 y 96 cuadros por segundo, la faena entre 88 y 101 y el mapa entre 141 y 143 (medición local del 31-10-2026)
- La roca del testigo y la pared del corte se dibujan con shaders propios y cambian con la profundidad según el perfil de un pórfido de cobre
- El mapa usa el relieve real del norte de Chile (SRTM, GMTED y ETOPO1, de dominio público), con la altura exagerada cinco veces; las campañas son de ejemplo
- La faena usa texturas escaneadas y la luz de un cielo HDR real (Poly Haven, licencia CC0), con polvo en suspensión calculado rayo por rayo: denso a ras de suelo, más difuso a lo lejos y encendido a contraluz del sol o por las luces de la torre; cada pieza tiene cantos redondeados y su sombra de contacto en el suelo
- Las fuentes de respaldo tienen las medidas de las reales: al llegar, el texto casi no se mueve (desplazamiento acumulado de 0,002 a 0,003)
- En celular no corre el 3D: cada capa llega como imagen sacada de la misma escena
- Si el sistema pide menos movimiento, el sitio se muestra sin escenas ni animaciones
Lo técnico
Astro, three.js en tres workers con OffscreenCanvas, GSAP, ScrollTrigger y Lenis para el recorrido, Geologica en dos cortes fijos, con fuentes de respaldo medidas.
