# From Plan to House

A scroll page that starts as a floor plan of the Open House and ends standing inside it.

![The page at the top: a flat ink plan of the ground floor, cut at 1.2 m](docs/still-0_000.png)

## What it is

At the top of the page you see a drawing. Black walls, thin furniture outlines, room names, grid bubbles and dimension chains on warm paper.

It is not a picture. It is the 3D house, sliced by a flat plane 1.2 m above the floor and seen from far overhead through a very long lens. That is how an architect's plan is made, so the model looks like one.

Scroll, and the house builds itself in front of you.

## How the plan becomes the house

**The cut rises.** A horizontal plane removes everything above it. At the top of the page it sits at 1.2 m, so you only see wall bases and low furniture. As you scroll it lifts past the ceilings and the tower roof, and the walls grow out of the drawing. Where the plane slices a wall, the slice is filled solid black. That is the heavy black wall line you see in the plan.

![Walls rising out of the plan](docs/still-0_050.png)

**The camera comes down.** There is one camera the whole time. At the top it is very far away with a very narrow view, so lines stay parallel and the house reads flat. As you scroll it moves closer, tilts, and widens its view at the same pace, until it stands at eye height outside the garden door. There is no switch from a flat view to a 3D view. It is one smooth move.

![Eye height at the garden door, still in ink](docs/still-0_100.png)

**Each room trades ink for materials.** The walk visits the seven viewpoints from the Open House tour: Living room, Dining room, Fireplace view, Garden doorway, Terrace, Staircase and Upper landing. A room stays a line drawing until you reach it. Then a thin orange line sweeps across it, and behind the line the room has oak, plaster, stone and tile. Rooms you have left keep their materials. Rooms you have not reached yet stay in ink, so you can look ahead through a doorway into the drawing.

![Living room in materials, dining room ahead still in ink](docs/still-0_200.png)

![The orange sweep line crossing the fireplace](docs/still-0_400.png)

A counter at the bottom right shows which stop you are at, out of seven. At the end the page hands you to the real tour.

![The finale, with a link to the real tour](docs/still-1_000.png)

## How it was made

A viral scroll page inspired the idea: [Sam1983Aing/casa-serra](https://github.com/Sam1983Aing/casa-serra). We wrote a behavior spec from watching it and built our own from the spec, without its code.

This is a clean-room rebuild. One session watched the original page and wrote down only what a viewer sees, with a ledger of evidence for each claim. A second session, the one that built this page, read only that spec. It never opened the original's code, screenshots or assets. All code, shaders, copy, colours and type choices here are our own.

The spec also lists checks that prove the page behaves as described. They live in `tests/oracle.mjs`. They render exact frames through a test hook, `window.setProgress(p)`, which draws one frame for a scroll position with time frozen. The suite also plants five deliberate bugs and confirms the checks catch each one.

## What is approximate

The plan comes from an authored navigation proxy, not from a survey. The Open House repo ships approximate walking surfaces for the viewer (`navigation.json`, `tour.json`, `collision.glb` and the script that builds them). Those are "approximate navigation surfaces, not architectural measurements."

We used them as the frame and drew a cleaner plan on top: straight walls, door and window openings, room names, furniture. The proxy's 15 degree turn is undone so the plan sits square, and its main floor (0.84) is moved to zero. Room sizes on the page are rounded, and they are only as good as the proxy.

The upper floor is only mapped around the stair and the landing. So the page builds the landing and shows the rooms beyond its door as a dashed outline labelled "not mapped". It does not invent them.

The materials are made in code. There are no texture images and no shadows.

## Run it

Open `index.html` in a browser. There is no build step and nothing to install. The page uses plain scripts, so it works from a file.

If the browser cannot draw WebGL, the page shows the plan as a still drawing, one sentence saying so, and a link to the real tour.

Checks (need Playwright and a Chromium):

```
PLAYWRIGHT=/path/to/node_modules/playwright/index.mjs CHROME_BIN=/path/to/chrome-headless-shell node tests/oracle.mjs
PLAYWRIGHT=... CHROME_BIN=... node tests/shot.mjs 0 0.05 0.1 0.2 0.4 0.7 1
```

The last run is saved in `docs/oracle-results.txt`.

## Credits and licences

- Code for this page: MIT, Copyright (c) 2026 Wilson Wu. See `LICENSE`.
- three.js: MIT, copied into `vendor/` with its licence.
- Manrope font: SIL Open Font License 1.1, copied into `fonts/` with its licence in `licenses/`.
- Geometry source: the Open House navigation proxy, MIT, by Wilson Wu.
- The real tour uses the Maison Provence capture by splatmotion3dgs, CC BY-ND 4.0. It is linked, not included. Nothing from the scan is cut, changed or shown on this page: [open the real tour](https://wilsonwu-ai.github.io/open-house-studio/).
- Idea: [Sam1983Aing/casa-serra](https://github.com/Sam1983Aing/casa-serra). No code or assets were used.