The task
A house that has not been built yet is usually sold with a set of renders and a PDF of the plans. The buyer looks at both separately and has to put them together in their head: where the door is, what the living room opens onto, how far the bedroom is from the kitchen.
The idea here was to make the plan and the house one thing. The page starts on the sheet an architect would print, and the same drawing turns into the building as the reader scrolls, so the layout is understood before the first room is even entered.
It is our own concept, not a client order, and it is still a work in progress. It went through four full versions in two weeks; the floor plan idea itself only appeared on the fourth day.
What we built
The first screen is a drawing sheet
The page opens on a ground floor plan: walls in black, room names, areas and dimensions, a title block in the corner with the scale and the sheet number. Nothing on it looks 3D, and that is on purpose.
This plan is not a picture. It is the 3D model of the house itself, cut at 1.2 metres and seen from straight above through a very long lens, so the drawing and the building are literally the same thing. Every wall on the sheet is a wall the camera will walk past later.
Scrolling raises the cut, and the walls grow
Because the plan is a cut through the model, there is no trick needed to make it three-dimensional. Scrolling lifts the cutting height, and what the reader sees is the walls growing out of the paper.
Then the lens shortens, the camera comes down to the front door and goes in. From there the tour moves deep into the house rather than circling it from outside: the entrance, the living room, the dining table, the patio, the glass gallery, the bedroom, the bath and the garden.
Every room is a line drawing until you get there
Rooms ahead of the camera stay drawn in thin black lines on white, like a page of the project. When the camera arrives, the real materials sweep across the room: stone, oak, walnut, marble, linen, stucco.
That keeps the idea of the first screen alive for the whole walk. The reader is never looking at a finished render, they are watching the drawing turn into a house one room at a time.
A house with furniture, an olive tree and late afternoon light
The house is meant to feel like one that costs millions: big rooms, real furniture, a sunken sofa by the fireplace, a long dining table, an olive tree in the patio and a pool past the garden. The light is a low sun, which is what gives the rooms their depth.
All of it, from the walls to the chairs to the tree, is geometry written in code. There is no Blender file behind this house. The surfaces are free CC0 scans from Poly Haven.
The walk ends where it started
After the garden the camera rises over the roof and shows the whole house from above, built, and then the plan comes back as a sheet. The last screen says it in one line: every building starts flat, ours don’t stay that way.
Under that line there is one button, and it opens a WhatsApp chat. There is no form to fill in at the end of a walk like this.
Under the hood
The house is drawn live in the browser, so most of the work went into the model, the weight of the textures and keeping the picture steady while the camera moves. Here is what is under the walk.
The model
The plan is a section of the model
The floor plan is rendered from the 3D model, cut at 1.2 m and seen from above through a very long lens, which flattens it into a drawing.
Seventeen spaces, all in code
From the garage and the wine room to the master bedroom and the private garden, every wall, piece of furniture and the olive tree is geometry built in code.
three.js, GSAP and Lenis, with no build step
The scene runs on three.js, the walk is tied to the scroll with GSAP ScrollTrigger and smoothed with Lenis. The site is plain files served as they are: the scene and the tour together come to about 130 KB of script.
Weight and loading
Thirteen CC0 materials, in two sizes
A laptop loads the full set of thirteen materials, about 39 MB, and a phone gets the same set at a quarter of the pixels, about 13 MB. Poly Haven
A loading screen that tells the truth
The percentage counts the 41 files the scene actually asks for and keeps the last tenth for preparing the scene, so it never jumps back.
A fallback instead of a blank page
The house needs WebGL 2. A browser without it, or one that loses the graphics context halfway, gets a still of the house and the clip of the walk, so the visit still shows what the page is about.
A steady picture
One fixed pixel budget for the whole walk
Instead of switching the render size between rooms, which made the image jump, the tour draws a fixed 2.4 megapixels on a laptop and 1.5 on a phone.
Flicker traced and removed
The ceiling flickered after the scroll stopped; the cause was the sun dust in the air, so the dust went and the sunlight and its shafts stayed.
What came out of it
- One scroll takes the reader from a printed plan through seven rooms of the house.
- The whole house is geometry in code, dressed in thirteen free CC0 materials.
- A phone downloads about a third of the textures a laptop does.
- A device that cannot draw the house gets a still and a clip of the walk instead of a blank page.
The page answers the question a plan alone never does — what it is like to stand in the house — and it does it without taking the plan away. For an architect or a developer that is the difference between a buyer reading a drawing and a buyer walking through their future living room.
