# Hand Built

Six substantial, independent HTML/CSS/vanilla JavaScript experiments. No frameworks, build step, external runtime dependencies, remote fonts, analytics, or network services.

## Open the collection

Extract the **whole ZIP** first, keeping the `hand-built` folder and its subfolders together. Open `hand-built/index.html` in a modern browser, or start the included local server for the most predictable behavior:

```sh
cd hand-built
python3 serve.py
```

Then open **http://127.0.0.1:4387/**. Keep the terminal open while exploring; Ctrl+C stops the server. The launcher always serves the complete collection from its own folder, even when invoked from somewhere else. If the port is occupied, use `python3 serve.py --port 4388` and open the printed address. It binds only to this Mac's loopback address.

On macOS with Python 3 installed, double-click **Start Hand Built.command** to start the server and open the gallery automatically. The command-line equivalent is `python3 serve.py --open`.

The preview uses localhost port 4387, separately from existing projects. A page left open after its server stops can still look complete, but new links will fail until the server restarts. Reopen the launcher if that happens. A single-file attachment preview does not include the neighboring experiment folders; download and extract the complete ZIP to explore them. The `file://` option works without a server when the whole folder has been extracted.

## Six ways in

| Experience | Try this |
| --- | --- |
| **Offset** (`press/`) | Write a short phrase, switch the type composition, misregister the ink, and pull an impression. Keep an SVG from the drying rack. |
| **Signal House** (`signal/`) | Enable sound, choose an imagined station, then tune the dial and adjust the tone. Sound is synthesized locally and starts only after an explicit click. |
| **A Mile Below** (`descent/`) | Scroll from the waterline to the bottom. Jump between the five chapters and inspect the illustrated logbook. |
| **Object & Light** (`light/`) | Move the light across a sculptural loop. Compare aluminium, milk glass, and lacquer, then vary the roughness, elevation, and lighting. |
| **Common Water** (`delta/`) | Scrub through the seasons, choose a drier year, and change the ecological allocation. Inspect how the same finite supply splits between uses. |
| **Marble Post** (`marbles/`) | Set the gates, tilt the table, and send a marble into one of five destinations. Clear the board and try another route. |

## Access and preferences

- Tab moves through controls, arrows adjust native sliders, Enter/Space activates buttons. Drag controls have keyboard equivalents.
- All pages provide visible focus and responsive layouts.
- System reduced-motion preference simplifies animation. Marble delivery becomes immediate.
- Signal House begins silent and provides mute plus volume. The other experiments are silent.
- The gallery works without JavaScript. Rich interactions in the individual experiments need JavaScript.

## Source map

Each experience owns its own `index.html`, `style.css`, `script.js`, and `NOTES.md`. There is no shared application state or framework. `assets/` holds the gallery styles, favicon, and original SVG cover art. `output/playwright/` contains desktop/phone previews and supporting verification captures. `previews.html` is a contact sheet of the six experiences. `notes.html` is the browsable technique guide. `VERIFICATION.md` is the release check record.

## Technical notes

See **[Under the surface](notes.html)** for the short CSS-versus-JavaScript guide and each experiment's `NOTES.md` for details. Modern Chromium, Safari, and Firefox are intended; only the browser actually listed in `VERIFICATION.md` has been tested. Material appearance and system-font metrics vary by platform. These are interactive studies, not production services or scientific simulators. The river data and underwater expedition are explicitly fictional.

## Originality and runtime

All visuals and code are original to this separate exploration. No existing production projects or their files were reused. The user cited [Peng Zheng's site](https://www.pengzhe.ng/) as inspiration for tactile web controls; no code, identity, or assets were copied.

Six implementation agents were requested with `gpt-6-astra` and `ultra` reasoning. The collaboration tool accepted those requested settings. It does not return independent backend model attestation, so this is a record of the confirmed configuration, not a claim about hidden runtime internals.

MIT licensed; see `LICENSE.txt`. No third-party runtime assets are bundled.