Notes on the build

A configurator, made like an object page.

LUMEN & CO is a fiction. The 04 Series does not exist, the atelier in Ghent does not exist, and Elin Marstrand has never designed anything. The configurator is entirely real.

The concept

Real-time configurators are the most commercially useful pattern on the web, and almost all of them look like software. This one is built as a museum object page instead: warm white field, ink type, one brass accent, enormous negative space, and the product as the only saturated thing on screen. No badges, no urgency, no cart. There is not one image file in the project. The brass grain, the oak figure, the powder coat tooth, the studio wall and the environment map are drawn into canvases at boot and handed to WebGL.

What is actually running

• three.js r169, one WebGL context for the page. MeshPhysicalMaterial does the work: transmission, thickness, IOR and attenuation for the opal glass; metalness with an anisotropic roughness map for the brass; sheen for the powder coat; clearcoat over oiled oak.
• A generated environment. Soft panels and a warm bounce card in an off-screen scene, convolved by PMREMGenerator into an irradiance map, once for day and once for night. No HDR file is fetched. ACES filmic tone mapping, one shadow-casting key, and a ground plane whose alpha map is two crossed ramps so its edge never reads as a horizon.
• One profile, two renderings. Twenty coordinate pairs describe the shade. LatheGeometry revolves them, and the same array is traced into the SVG elevation lower down, so the drawing and the object cannot disagree.
• GSAP with ScrollTrigger for every state change: the squash and elastic settle on a finish swap, modules arriving on back.out while their neighbours reflow, the exploded sequence, the camera moves, the dim.
• Screen-space SVG. Each frame the part anchors are projected through the camera and the leader lines rewritten, with the panels on screen measured as no-go zones so a label never sits under the price.
• Camera. OrbitControls with damping and a clamped polar angle in the configurator; elsewhere GSAP tweens it. Off-centre framing is a lens shift through setViewOffset. Taking the fixture apart squares the camera up to a front elevation, the only way dimension lines read as a drawing.
• Performance. Capped pixel ratio, half resolution transmission, geometry scaled rather than rebuilt, and a loop that parks when the object leaves the viewport. The palette lives in @property tokens, so day to night is one CSS transition.

The moment

Night is the argument. One control takes the studio to near black and the key light to almost nothing. The shades take on real emissive output, warm point lights throw genuine pools on the reference plane, and a low rim catches the brass. Same geometry, same materials, two worlds. A photograph cannot do that.

Four passes

Each pass read its own screenshots back, cleared the console, and had to produce five concrete improvements: framing, type hierarchy, spacing rhythm, the quality of the settle, contrast in both palettes. States were driven in a real browser with Playwright, because a screenshot cannot prove a toggle works.

Prompting an agent to build this

Give the art direction as constraints, not adjectives: exact hex values, two type families, one accent. Then name the techniques: physical materials with transmission, a PMREM environment from an authored scene, one profile shared between the lathe and the drawing, GSAP for every state change, projected callouts, a parked render loop. Forbid image files, which forces real procedural texture work. Describe the one moment you want screenshotted and what it must feel like, then require the agent to read its own screenshots and list five improvements per pass. Say what to avoid: no gradient hero, no default sans, no card grid, no glass panels.

Back to the 04 Series

Designed & built autonomously by Claude Opus 5.
Part of the FABLE collection