Side project · React Three Fiber · Private repo
horizon
The seafront of Cubelles, modelled in Blender and scrolled through in WebGL. A 3D page that is still a page: every word is HTML, and every reader gets one.
Demo
The seafront in 30 seconds
The frames in the video are the live page's own, taken from a production build: the beach, the town and the promenade, by day and by night. The numbers are the test report's.
01 · Scene
Your scroll drives the camera
Three keyframes, one per section: the beach looking west, the town climbing to its bell tower, the promenade under the palms. The camera follows the document's own scroll and eases between them; the words scroll natively over it.
02 · Day and night
One attribute, two skies
The scene reads data-theme off the page and holds no theme of its own. Night lights the town, turns on the bell tower's beam — one hand-written shader — and the only bloom pass the page runs.
03 · Every reader
Nobody gets a blank canvas
Without WebGL2, under reduced motion, or after a lost context, the reader gets the poster; with JavaScript off, the server's page: every word and the poster. The scene carries no text and is hidden from assistive technology.
04 · Budget
Measured, not assumed
The scene's chunk is 321 kB gzipped against a 325 kB cap and is never in the document; the model is 438 kB with 29,434 triangles; the page's own JavaScript is 182 kB, with no Three.js in it; mobile LCP is 2.6 s, and the LCP is the poster.
The repository is private; the page, its three languages and the numbers it was judged by are public and checkable.
Next
Keep your codebase verifiable. Get your mornings back.
Open to Lead and Senior Full Stack roles and contract work, remote across Europe or hybrid in Barcelona and Madrid. A 30-minute call on your own codebase, no slides.