LUMEN
A field study of one ray of light and one piece of glass. Five phenomena, computed on your GPU as you read - nothing on this page is a video.
Light changes its mind at the surface.
The moment light crosses into glass it slows to about two-thirds of its vacuum speed, and its path bends to account for the loss. fixes the new angle exactly. Everything else on this bench follows from that single negotiation at the boundary.
Bent light has to land somewhere.
A curved surface bends every ray by a different amount, and the floor collects the result: bright envelopes where paths pile up, shadow where they were stolen from. The dancing net at the bottom of a swimming pool is this figure, drawn by the sun through waves.
White light was never one thing.
The bend depends on wavelength - violet turns harder than red. Give the glass an edge and it sorts white light into a spectrum, ranked by how hard each color brakes. The of this specimen rates how widely it spreads them.
Thin enough, glass plays light against itself.
At a few hundred nanometers, the reflection off the top of a film meets the reflection off the bottom, and the two waves add or cancel color by color. Soap bubbles and oil slicks get their rainbows here - not from pigment, from arithmetic.
The glass keeps a toll.
No medium is perfectly honest. Each millimeter absorbs a fixed fraction of what enters it - - and the color of deep glass is simply the wavelengths it failed to steal. Look through the edge of any windowpane to see the debt.
What leaves the glass is a record of the glass.
Bent, focused, sorted, phased, taxed - the ray that exits carries every event as color and direction. That is all an image is: light, annotated by matter.
Built as one HTML file. The specimen is a signed-distance field, sphere-traced in a WGSL fragment shader on WebGPU - per-wavelength refraction, thin-film interference, Beer–Lambert extinction - with the same scene carried by WebGL2 where WebGPU hasn't landed. The page around it is CSS: scroll-driven timelines run the chapters, anchor positioning pins the footnotes, scroll-state queries dress the sticky headers, and the corners are true squircles. No frameworks, no images, no video. There is a write-up of how it was built.
Full instrument panel
- WebGPU / WGSLraymarched SDF morph, live uniforms
- WebGL2 GLSL ES 3.0same scene, fallback path
- scroll() / view() timelinesrail, reveals, chapter state
- timeline-scoperail reads chapter timelines
- scroll-state(stuck)sticky headers self-style
- anchor positioning + popoverfootnotes, with @starting-style
- corner-shape: squircleevery rounded box on this page
- text-box trimcap-height-true display type
- oklch + relative colorwhole palette, spectrum in longer-hue
- interpolate-sizethis panel animating to auto
- @property + linear() springstyped scroll variables, spring easing
- reduced motion / transparencyboth respected