Proyecto propio · React Three Fiber · Repo privado
horizon
El paseo marítimo de Cubelles, modelado en Blender y recorrido con el scroll en WebGL. Una página 3D que sigue siendo una página: cada palabra es HTML y nadie se queda sin ella.
Demo
El paseo en 30 segundos
Los fotogramas del vídeo son de la página en producción: la playa, el pueblo y el paseo, de día y de noche. Las cifras son las del informe de pruebas.
01 · Escena
Tu scroll mueve la cámara
Tres keyframes, uno por sección: la playa mirando al oeste, el pueblo subiendo hasta el campanario y el paseo bajo las palmeras. La cámara sigue el scroll del propio documento y se suaviza entre ellos; el texto se desplaza encima, nativo.
02 · Día y noche
Un atributo, dos cielos
La escena lee data-theme de la página y no guarda tema propio. De noche se encienden el pueblo y el haz del campanario —un único shader escrito a mano— y el único pase de bloom de la página.
03 · Para todos
Nadie se queda con un lienzo en blanco
Sin WebGL2, con movimiento reducido o tras perder el contexto, aparece el póster; sin JavaScript, la página del servidor: cada palabra y el póster. La escena no lleva texto y está oculta a las tecnologías de apoyo.
04 · Presupuesto
Medido, no supuesto
El chunk de la escena pesa 321 kB en gzip frente a un tope de 325 kB y nunca va en el documento; el modelo, 438 kB con 29.434 triángulos; el JavaScript de la propia página, 182 kB y sin Three.js; el LCP móvil es de 2,6 s, y el LCP es el póster.
El repositorio es privado; la página, sus tres idiomas y las cifras con las que se juzgó son públicos y comprobables.
Siguiente
Mantén tu código verificable. Recupera tus mañanas.
Abierto a puestos de Lead y Senior Full Stack y a contratos, en remoto por Europa o híbrido en Barcelona y Madrid. Una llamada de 30 minutos sobre tu propio código, sin diapositivas.