Under
the surface.

A browser can be a printing press, a listening room, a diving bell, a lighting studio, a waterway, or a very small post office. These are six studies in making ordinary web materials feel like something.

The ingredients

The collection is written in plain HTML, CSS, and JavaScript. All the images are drawn with code: layered CSS, SVG, and canvas. System fonts keep everything offline. There is no build step, package install, tracking, remote API, or external runtime asset.

Each experiment is independent. Open its index.html, inspect the styles, and change something. The most useful parts are often quite small: a CSS custom property carrying a light position; an SVG path changing with a number; a range input providing keyboard access to a physical-looking knob.

Experiment	CSS & markup	JavaScript earns its place
Offset	Paper layers, ink blending, an impression roller, and a typographic composition in SVG.	Typesetting, pressure and registration values, storing the last six prints, and exporting your own SVG.
Signal House	Brushed metal, walnut cheeks, dial markings, tactile knobs, and recessed glass.	Tuning, station presets, scope drawing, and synthesized Web Audio after you enable sound.
A Mile Below	A sticky illustration, SVG scenery, layered depth, and editorial chapters.	Scroll position maps to depth, light, scene transforms, and chapter navigation.
Object & Light	Masked geometry, stacked volume, gradients as surface reflections, and cast shadows.	Pointer and keyboard light placement, material choices, and lighting variables.
Common Water	SVG waterways, proportional ribbons, labels, and a seasonal timeline.	A finite water allocation model, computed ribbon geometry, optional flow traces, and channel inspection.
Marble Post	A physical board, pegs, gates, pockets, and glass marbles.	A gravity and collision simulation, adjustable routing, and a delivery ledger.

Take your time

Try the controls with a mouse, a touch screen, or a keyboard. Tab moves between controls; arrow keys adjust sliders; Enter and Space activate buttons. Focus is visible throughout. Dragging is an extra convenience, with keyboard controls for the same choices.

The collection follows your system’s reduced-motion preference. Scroll scenes simplify, decorative transitions stop, and Marble Post delivers its result immediately. Signal House starts silent and only creates sound after you choose Enable sound. It includes both mute and volume controls.

Edges of the illusion

Materials are an illustration, not a renderer

Object & Light uses layered CSS to suggest volume and surface finish. It does not perform ray tracing, physically accurate reflection, or a real light-transport simulation. The useful trick is coordinating highlights, shadows, and the direction of light.

The river and the journey are invented

Common Water is an illustrative allocation model, not measured river data or policy guidance. It preserves a finite water supply to make the tradeoffs legible. A Mile Below is a fictional illustrated logbook, not an oceanographic expedition.

Browser support and local files

Use a current Chrome, Edge, Firefox, or Safari. CSS masks, blend modes, SVG filters, and Web Audio are modern browser features; exact material rendering and type metrics vary. Chromium is the verified browser for this release. Safari and Firefox have not been independently tested.

The files are self-contained, so opening index.html directly works in modern browsers. A plain local static server is the most predictable option. Audio playback needs an explicit gesture, and the browser controls where an exported SVG is saved.

Without JavaScript

The gallery and notes remain fully readable and linked. Experiment text and basic artwork remain, but live typography, synthesis, lighting, river recalculation, and marble physics require JavaScript. Each experiment contains a message explaining its interactive requirement.

A note on inspiration

The tactile timeline and physical interface language of Peng Zheng’s public site was part of the brief. This collection follows that curiosity about touch, spring, and mechanical feedback with original layouts, illustrations, and interactions. No code, identity, or assets were copied from that site.

The collection was developed in an isolated workspace. Six parallel build agents were requested with gpt-6-astra and ultra reasoning; the collaboration tool accepted those settings. The tool does not expose independent backend model attestation.

Make it yours

The README has launch instructions, the folder map, and a short tour. Each experiment has its own NOTES.md with implementation details. The verification record describes the checks actually performed, with captured previews in output/playwright.