This Website
The site you're flying through — a WebGL cinema on a 100-Lighthouse budget.
This site is its own case study: a scroll-driven WebGL journey that still behaves like a boring, fast, semantic website. The premise is that the two goals — cinematic and optimized — stop conflicting if the 3D scene is treated as decoration layered behind a real document, never as the document itself.
HTML FIRST, WEBGL BEHIND IT
The page is a normal server-rendered document. Every word — name, projects, contact — is real DOM text: crawlable, selectable, readable with JavaScript disabled. The canvas mounts lazily after first paint as a fixed background layer, so the Largest Contentful Paint is the headline text, not a loading spinner for a 3D engine.
Visitors with prefers-reduced-motion, no WebGL, or no JS get a pure-CSS starfield and a complete site. The scene is a reward, not a requirement.
THE SCENE, ON A BUDGET
All geometry is generative — points, lines, gradients — so there are no 3D assets to download; the payload is essentially three.js itself, loaded only on the home route. Stars render as a single instanced points layer per color (one draw call each), nodes are tiny primitive clusters, and the neural lines are one dashed line pass.
Scroll stays native — no scroll-jacking. Lenis smooths it and emits a progress value that scrubs the camera along a spline; the same value drives the DOM cards, so 2D and 3D can never drift apart. Device pixel ratio is capped, and the case-study routes ship approximately zero client JavaScript.
HIGHLIGHTS
- ▸LCP is text: canvas lazy-mounts behind an already-usable page
- ▸Generative geometry only — no models, no textures to download
- ▸Native scroll scrubs a spline camera; no scroll-jacking
- ▸CSS starfield fallback for reduced-motion / no-WebGL / no-JS
- ▸Statically exported; served from the edge with zero cold starts