Guide Behind the glass
A technical field note on making a painted town feel physically present—while keeping every brushstroke, lens flaw and moving creature inside the browser.
01 · Concept
The design begins with a strict separation: the observation drum is almost black, tarnished brass gives it structure, and the seaside palette is allowed to exist only on the projection table. That makes the canvas feel less like an illustration placed on a page and more like actual daylight entering a room. The Victorian story is told through instrument labels, a keeper’s plaque, mechanical specifications and the 1897 visitor ledger rather than decorative costume. The page descends like the tower itself: live view, principle, mechanism, human evidence, then today’s ascent.
02 · Visual systems
render() in main.js composites drawSky(), drawHarbor(), drawTown(), drawForeground() and drawGulls(). Uneven roof paths, smoke, waves, tram, laundry, flowers and walkers are all drawn as 2D paths—there are no image files. A paper wash and moving dust field keep the result luminous rather than digitally crisp.
Gulls wheel on staggered sine curves; the tram advances along a sloping rail; laundry panels carry separate flutter phases; the tide displaces successive wave lines; chimney smoke and quay figures drift at their own pace. Counts stay small, and the table observer plus visibilitychange stop the animation loop whenever it cannot be seen.
beginDrag(), moveDrag() and endDrag() turn pointer velocity into bounded mirror inertia. updateInstrumentReadout() keeps the brass handle, bearing and named view synchronized. Harbor, town and terrace are rendered with different parallax and blur, so the focus wheel selects a spatial plane rather than applying one cosmetic filter.
Concentric gradients build the brass table. .lens-vignette softens the edge and .projection-bloom scatters light. The new setShutter() mechanism closes .manual-shutter, announces its state, and cancels canvas work until daylight is admitted again. The SVG ray study also responds to pointer position and arrow keys.
03 · Palette & type
The interface uses near-black #0b0b09, projection paper #eee5cf, and brass #b98a3e. Dusty blue and coral appear only inside the live town; even the barometer line below stays brass, preserving the projected color as a surprise.
04 · Reproduce this
Ask an AI agent for a specific physical illusion and name the observable systems that must prove it works. Require procedural visuals, responsive controls, and a performance contract.
“Build a no-dependency web experience for a historic optical instrument. Put a high-DPI procedural canvas inside a convincingly dimensional brass apparatus. The scene must contain at least four independently animated events, react to drag with depth-aware panning, and include a control that changes focus between scene planes. Confine the bright palette to projected light; use the surrounding content to explain the physics and human history. Pause animation when hidden and simplify it for reduced motion.”