# The Walkthrough — a listing you walk through

A drop-in page from [Funeral Thirsty](https://www.funeralthirsty.com/studies/walkthrough.html). One fictional house, 14 Elsewhere Lane. Scroll room to room and the plan fills in. The sun slider relights every drawing. The showing request writes a sentence and sends nothing.

The house, the price and the rooms are invented. Every drawing is made by the page. There is no photograph.

No build step, no dependencies, no framework. Two scripts.

## Unzipping

The zip is flat: its files land in whatever folder you unzip it into, with `index.html` at the top. Make a folder called `walkthrough` first if you want them contained. Design tools that import the zip open that `index.html`, the site, as the entry.

## The minimum that installs it

```html
<body>
  <div class="tour">
    <aside class="plan" id="plan">
      <svg id="plan-svg" viewBox="-9 -11 58 58"></svg>
    </aside>
    <main class="walk" id="walk"></main>
  </div>
  <script src="walkthrough-draw.js"></script>
  <script src="walkthrough.js"></script>
</body>
```

`walkthrough-draw.js` has to load first. It exposes `window.WalkDraw`. The page script builds the ten rooms into `#walk` and the plan into `#plan-svg`.

`#here-name`, `#sqft`, `#seen-count`, `#hour-label`, `#lit-note`, `#hour` and the showing dialog are optional. Leave them out and `Walkthrough.setHour` still relights the drawings, and `Walkthrough.goTo` still walks the plan. The styles are in `walkthrough.css`, and in `styles.css` as the site uses them.

A web server is not required. The drawings are made on the page.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Walkthrough page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css`, `walkthrough-draw.js` and `walkthrough.js`. |
| `walkthrough-draw.js` | The drawings: interiors, the front door, the garden, the sun. `window.WalkDraw`. |
| `walkthrough.js` | The page. The house lives here, in `HOME`. It exposes `window.Walkthrough`. |
| `walkthrough.css` | The layout, and the few styles the palette and type previews use. |
| `demo/index.html` | The plan and the ten rooms, and nothing else. No slider, no readout, no showing request. |
| `OPTIONS.md` | The DOM the engine expects and the JavaScript interface. |
| `components/` | Preview pages for design tools: the plan, the palette, the type. Each opens in a browser on its own. |
| `tokens/tokens.json` | The kit's colours, type and sizes in the W3C Design Tokens format (2025.10). |
| `tokens/tokens.css` | The same values as CSS custom properties. |
| `DESIGN.md` | The guideline: colour, type, spacing, layout, components, motion, voice, brand, anti-patterns. |
| `design-system-spec.json` | The manifest Claude Design reads. |
| `manifest.json`, `tokens.css`, `design-tokens.json`, `components.html`, `USAGE.md`, `preview/` | The Open Design layer: its manifest, its token contract, its token JSON, a component fixture, a usage guide and preview pages (the site, colors, typography, spacing). |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, and what is not licensed. |

## Loading it into a design tool

The kit carries two layers, one for each tool, describing the same system.

**Open Design.** Import `walkthrough.zip` and it opens on `index.html`, the site, with every other page listed alongside it. Read as a design system, the same archive supplies `manifest.json`, `DESIGN.md`, `tokens.css`, `components.html`, `USAGE.md` and the pages under `preview/`, and The Walkthrough becomes a system other work can be rendered in.

**Claude Design.** Reads `design-system-spec.json`, the component previews under `components/` with their first-line `@dsCard` markers, and `tokens/tokens.json` in the W3C Design Tokens format.

## Making it yours

Change a room in `HOME`, inside `walkthrough.js`, and the page rebuilds: the plan rectangle, the copy, the furniture, the window. The pen reads `--sheet` and `--ink` once, when `walkthrough-draw.js` loads. The sky, the sun and the furniture colours stay in the scripts. Editing the token file does not move the sun or rewrite the house.

The day runs from 6 to 20. A window counts as lit when `lightOn` is above 0.35. The tally eases over 600ms. Those numbers live in the scripts. The token file records them. Editing the token does not change them.

The showing form writes a sentence on the page and sends nothing. There is no photograph to replace.