One native control, one shared angle and two complete render paths make the pavilion feel physical without making the content fragile.
The sun rail is the only spectacle. Its value moves the directional light, turns the glass fin, changes the caustic field and repositions the coloured sentence mask. The 3D scene and semantic page therefore describe the same event.
The scene uses planes, roof slabs, floor plates, a prism, a glass fin and two reflective elements. The camera looks through the structure rather than orbiting a central object. The open edges make the composition read as architecture.
Three.js MeshPhysicalMaterial provides transmission, thickness, index of refraction and spectral dispersion. A small fragment shader lays three soft caustic bands across the stone floor. Directional shadows keep the colour attached to a believable room.
An original inline SVG arrives with the HTML. It contains the same walls, glass fin, chrome column and separated ray. WebGL fades in only after a successful context and first render, so loading never means a blank stage.
The control is a native range input, not a simulated slider. Arrow, Page Up, Page Down, Home and End work automatically. The visual rail is 52 pixels high, focus is explicit and the final angle is announced after a change.
The renderer caps device pixel ratio at 1.5, pauses outside the viewport, disposes on page exit and loads only on the homepage. The complete vector frame is immediate; the live module starts on pointer, keyboard or range-input intent, with a delayed passive start after the critical interaction window. The scene uses procedural geometry, a single environment map generated in memory and no image textures.
Geometry, SVG fallback, caustic shader, copy and identity are original to this repository. Three.js is MIT licensed. Syne and Spline Sans are self-hosted from Fontsource under their open font licences. No stock or generated media is shipped.
LUCENT uses Cloudflare Pages Direct Upload. From a clean checkout, install exactly the locked dependencies, build the static directory, confirm Wrangler authentication, create the project with `master` as production branch, then upload `dist` on that branch.
npm ci npm run build npx wrangler whoami npx wrangler pages project create house-of-refraction --production-branch master npx wrangler pages deploy dist --project-name house-of-refraction --branch master
Run the live browser and Lighthouse gates against the exact URL returned by Wrangler. Future updates repeat the clean build, deploy and live checks; Wrangler attaches the clean Git commit metadata to each deployment.
$env:QA_BASE_URL = 'https://house-of-refraction.pages.dev' npm run qa:live npm run qa:lighthouse # After a committed update npm ci npm run build npx wrangler pages deploy dist --project-name house-of-refraction --branch master npm run qa:live npm run qa:lighthouse