LUMEN. Design guide · Site 12 of 25
How this site was made

Glass is a
render path.

LUMEN is a fictional glassblowing studio. Its three vessels are computed live in WebGL with physically-based transmission — bending, tinting and iridising the studio's light exactly as annealed glass would.

Concept

Most craft sites photograph the object; this one manufactures it in the visitor's GPU. The page is one long working day at the furnace: the same three forms re-poured in clear, then amber, then smoke as you scroll — because in a glass studio, colour is an ingredient, not a filter.

Palette

Annealer dark#0B0D12
Ice#EEF0F4
Furnace amber#FFB26B
Iridise lilac#C9B6FF

The interface stays at dusk so the glass carries all luminance. Amber and lilac are the two point lights orbiting the set — the palette is literally the lighting rig.

Typography

Light, held in suspension

Julius Sans One — display. Hairline geometric caps, blown thin and even; type you could shatter.

Whatever the room gives it, it bends and returns.

Mulish Extralight — body, with wide-tracked caps as the utility voice.

Techniques

ElementHow it works
Real glass shadingMeshPhysicalMaterial with transmission: 1, thickness for internal refraction, IOR 1.5 (crown glass), clearcoat for the fire-polish, and the iridescence layer for fresh iridising film. Environment lighting via a PMREM-processed RoomEnvironment.
Blown formsThree LatheGeometry profiles — vase, bowl, bottle — drawn as 2D silhouettes and spun at 96 segments, the digital equivalent of turning at the pipe.
Colour poursEach scroll chapter retints color and attenuationColor and adjusts exposure through a GSAP tween — clear → iron amber → smoke — so the same geometry reads as three different pours.
Living lightAmber and lilac point lights orbit slowly; because everything is transmissive, the refractions never sit still.
AccessibilityReduced motion stops rotation, orbits, and tint transitions become instant. All content is real text over the canvas.

Interaction map

You doThe page does
Scroll to chapter IIThe vessels re-pour in iron amber; exposure warms
Scroll to chapter IIIThe smoke pour: darker glass, dimmer room
Scroll anywhereThe camera drifts down and closer, like leaning in at the bench
← Back to the furnace