Plan
to Space.

Start with a drawing.
Scroll to walk through five rooms.

PROJECTCOURTYARD HOUSE

DRAWINGGROUND FLOOR PLAN

UNITSMETRES · CONCEPT

SHEETAV-01 / REV C

PREPARING THE 3D VIEW…

Get the prompt

1920 × 1080 · The primary suite, at the held camera · Ready to upload to Studio

BEHIND THE EXPERIENCE

Build your own
way inside.

A starting brief for a coding assistant. Change the house, the materials and the route, then build and review one stage at a time.

The walkthrough is a hand-authored 3D concept. Its photoreal views were created with the built-in Image Gen from exports of the same cameras. They are illustrative AI visualizations, with furniture refined by the model, not a Studio output or an uploaded-plan reconstruction. AI can introduce small differences in geometry.

Interaction inspired by Casa Serra by Sam Aing . Read the original starter prompt. Material scans from Poly Haven (CC0).

Explore demos

WEB DEVELOPMENT PROMPT

Build an original, scroll-driven architectural web demo called "Plan to Space".

The first screen is a warm-white architectural plan sheet of a complete single-storey courtyard house. Use one real 3D model for the plan, the walkthrough and the ending. Look straight down through a long lens and clip the model horizontally at about 1.15 metres. Give cut walls the strongest black line weight, furniture a medium outline, and paving, axes and dimensions fine grey lines. Generate every annotation from the same layout data as the geometry: structural axes, chained and overall dimensions, door-swing arcs, window and sliding-glass symbols, room names and areas, a north arrow and a metre scale. Carry subtle paper fibres and fine grain while the house is a drawing.

Describe the house as data before modelling it: rooms as rectangles, walls as axis-aligned runs with thickness, height and openings (door, sliding glass, fixed glass, window with sill and head, garage door), and furniture as placed footprints. About 320 square metres enclosed: a tall entrance hall, a 10 × 6 metre living room with clerestory glazing, a kitchen and dining room, a library, a primary suite with bath, a guest room, a WC and a two-car garage, wrapped around a courtyard with an olive tree and a lap pool. Build walls by cutting the openings out of each run, so the plan, the model and the camera checks cannot disagree.

Scrolling drives one reversible camera path through several rooms, the way a person would walk:
1. Hold the plan long enough to read it.
2. Raise the cut so the walls grow out of the drawing, while the camera tilts into an overview.
3. Come down to eye height at the front door and walk in through the actual opening.
4. Stop in the living room, the kitchen and dining room, the courtyard and the primary suite. Between stops, pass through doorways and sliding glass, never through walls, furniture or the pool.
5. Each room stays a line drawing until the camera reaches it, then real materials sweep outward from its threshold.
6. At every room stop, hold the camera completely still, then dissolve into a pre-generated photoreal visualisation of exactly that frame and back to 3D before moving on. Export each frame with all materials revealed and no interface. When generating the images, keep the architecture and camera locked but let the image model redesign the simplified sofas, chairs and beds as real designer pieces in the same place, add restrained editorial styling and use low, warm, raking sunlight.
7. Lift the camera, reveal the whole furnished house from above, and lower the cut until it is the plan sheet again.

Describe each camera stop as a look-at point, yaw, pitch, distance and field of view, with a hold length and a travel length in scroll units. Interpolate with a Catmull-Rom spline and ease each journey between holds. Keep roll at zero and eye height constant indoors. Write tests that sample the whole path and fail if the camera crosses a wall outside an opening, comes within 30 cm of furniture or loses finite values.

Use three.js with physically based materials, a coherent afternoon sun and soft contact shadows. Keep wall tops ink-black while the house is a drawing. Never fade to an image that has not decoded. Label the visualisation honestly with its actual generation method, offer a button to compare it with the 3D frame, and do not imply it came from a product unless it did.

Use sparse interface text: a project title, a chapter selector, a replay action and a link back to the demo collection. Support phones and desktops, respect reduced-motion preferences with static chapter views, and before WebGL is ready or if it fails show a screenshot exported from the actual model in the same position as the opening frame. Pause rendering when nothing changes or the tab is hidden, cap device pixel ratio and dispose of GPU resources on exit.

For a coding assistant · Not an image prompt for Studio

Plan
to Space.

Back to
the plan.

The plan

Build your own
way inside.

Planto Space.

Build your ownway inside.

Plan
to Space.

Build your own
way inside.