One page, no raster images, no keyframes. Every ray is traced through real glass at runtime — the physics is the animation.
n1 sin θ1 = n2 sin θ2
The Wollaston Room is a fictional instrument-maker's bench for anyone who has ever wondered what a lens actually does to light — students, illustrators, the optically curious. The page has one job: put a working optical bench in your hands. Drag lenses, prisms, a slit and a mirror along a rail; light refracts correctly and forms — or fails to form — an image on the ground glass. Four presets rebuild the camera obscura, the camera lucida, Kepler's telescope and Newton's spectrum from the very same parts.
STIX Two, refracted
A book face with a rigorous mathematical companion — it sets Snell's law, the plate headings and every moment of ceremony without switching fonts. The italic carries the field-note asides. Chosen because the subject is mathematics wearing glass.
Space Grotesk · ƒ220
The instrument's engraving: rail ticks, focal lengths, the live readout, every eyebrow and label. A grotesque with real character in its digits keeps the measurements legible against the moving rays.
The bench is a single Canvas 2D geometric-optics engine — no three.js, no WebGL, no library at all. The world is 1000×540 units. Each component compiles to analytic surfaces: lenses become two circular arcs (true spherical caps, so they inherit real spherical aberration), the prism and mirror become line segments, the iris a pair of stops. A fan of rays leaves the source and each is marched surface to surface, taking the nearest valid hit.
At every glass boundary the direction is bent by the vector form of Snell's law
(refractDir()): with the ratio η = n₁/n₂ and the
surface normal, the refracted vector is computed directly — and when
η²(1−cos²θ) > 1, the law has no real solution and the
ray reflects instead. That single branch is total internal reflection: the
camera lucida's folding prism works because the geometry forces it, not because it was drawn
that way. Colour is real too — the glass index follows a Cauchy relation
n(λ) (dispersion exaggerated ~3× for legibility), so white light fans
into a spectrum and violet lands short of red. A lightweight analysis pass reads the hit
pattern and narrates what it sees: magnification, image sharpness, dispersion in millimetres.
Nothing is keyframed; move a piece a pixel and every ray re-solves.
Second reads: set Plate II, let the folded light rest, and a pencil draws the ghost onto the paper of its own accord; close the iris in front of a lens and the image tightens as the outer zones darken — stopping down to ƒ/8 in one gesture.
Read the rendered page against the contrast floor and caught the colophon credit line sitting at roughly 3.2:1 (faint slate on navy). Lifted it to the chalk-slate (≈6.5:1) and its links to full chalk, so the required attribution is comfortably legible without shouting. Confirmed the type scale, rail rhythm and gold discipline held elsewhere — the palette earns its restraint.
Added a quiet micro-interaction to the plate stamp in the bench's top corner: it now warms to ray gold whenever one of the four machines is set, and cools to faint the moment you improvise off-script by dragging or adding a part. A second read that ties the stamp to the bench's state, alongside the pre-existing self-drawing pencil on the paper.
Removed a no-op save / translate(0,0) / restore wrapper around the axis
labels — one ornament of dead ceremony gone (Chanel rule). Re-verified in headless Chrome:
zero console errors, hero visible, no horizontal overflow at 375px, focus rings on every
rail handle, DPR capped at 2, and the render loop parks on tab-hide and when the bench
scrolls out of view. Reduced motion renders one settled, fully traced frame.
Designed and built in one sitting by Sapience Analytics — concept, copy, optics and the ray tracer. Part of the Generative Assets collection.
Sapience Analytics builds working instruments for real businesses — AI automation and systems that behave like physics, not slideware. Commission one.