Planchest

Field notes

An architecture studio's site that is a steel plan chest under a desk lamp. Pull a drawer and its blueprint lifts onto the table, the plan draws itself and the floors rise into a clay model you can turn. Five drawers, five projects; shove one shut and dust puffs from the gap.

• 3D
• Pointer interaction
• Dark theme
• Portfolio

Planchest is the site of Hale & Ferrow, a fictional architecture practice, told as a steel plan chest in a dark room lit by one desk lamp. Each of its five drawers holds a project. Pull a drawer by its handle and it follows your hand along its rail; let go past halfway and the blueprint lifts out, sags as it flies and settles on the chest top. The plan draws itself line by line with its dimensions, then the floors rise from those lines as white wireframe and fill in as clay and glass. Drag the sheet to turn the model, and the lamp follows your pointer. Shove a drawer shut and dust puffs from the gap.

The five projects are also a list of real buttons, and keys 1 to 5 open them. Each pick writes the URL (#kiln-street-library), so a project can be linked and Back steps through them. On a phone the camera pulls back so the chest sits above the text. A 12-second tour opens the library and puts it back, and the first touch takes over mid-motion. Reduced motion cuts between states, and without WebGL the page keeps the index and shows each project's blueprint drawn flat. The studio, every word and every footprint live in copy.ts, and pnpm check says whether a new footprint fits the sheet.

How it's built

• One number drives a project's whole open sequence: p runs from 0 to 1 through the drawer sliding out, the sheet's flight and landing, the camera move, the plan drawing itself, the floors rising and the clay fading in. Closing is the same film played backwards, so there is no reset code.
• The state keeps when things were asked for, never how far along they are, so frame(state, t) can draw any second from scratch. A drag stores the pointer's p as a request at that moment, and a switch sends the open drawer home before the next one leaves, so two drawers are never out.
• Each footprint is a list of rectilinear rings in sheet metres. The same rings draw the plan stroke by stroke and extrude the slabs and walls, so the model always rises from its lines. A Node check asserts every footprint is closed, square-cornered, at most six floors and clear of the title block.
• Everything is three.js primitives and canvas textures: boxes and cylinders for the chest and lamp, one ExtrudeGeometry per slab, EdgesGeometry for the wire lines, and the blueprint and drawer labels drawn on canvases once the fonts have loaded. No models, images or HDR files.
• The 12-second tour is the same actions fed a fixed list: drawer 2 opens at 1.4 times a visitor's speed, the model turns a quarter and back, and the drawer closes quietly. The lamp's idle wander repeats every 12 seconds, so the Node check asserts that second 12 equals second 0.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

planchest-agency/
├─ .gitignore
├─ check.ts
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Page.tsx
   │  └─ Scene.tsx
   ├─ lib/
   │  ├─ copy.ts
   │  ├─ live.ts
   │  ├─ look.ts
   │  ├─ loop.ts
   │  ├─ plan.ts
   │  ├─ pose.ts
   │  ├─ time.ts
   │  └─ timeline.ts
   └─ scene/
      ├─ chest.ts
      ├─ model.ts
      └─ sheet.ts

Recut it

• Rename the studio and rewrite every stringsrc/lib/copy.ts + index.html → STUDIO / COPY / <title>
• Replace the five projects and their footprintssrc/lib/copy.ts → PROJECTS (parts, inner)
• Check a new footprint fits the sheet and the timeline still loopscheck.ts → pnpm check
• Re-skin the room, the chest, the blueprint and the claysrc/lib/look.ts + src/index.css → ROOM / MATS / LIGHT / SHEET_LOOK / MODEL_LOOK / @theme
• Resize the chest or move the camerasrc/lib/look.ts → CHEST / CAMERA
• Retime a visitor's open, the close or the shovesrc/lib/timeline.ts → OPEN / CLOSE / SHOVE
• Re-stage the open sequence (flight, plan, floors, clay)src/lib/pose.ts → pose()
• Retime the demo toursrc/lib/timeline.ts → TOUR / SWING / TOUR_RATE
• Redraw the blueprint's border, title block or north arrowsrc/scene/sheet.ts → drawSheet()
• Change how the model is built (floor height, walls, glass)src/scene/model.ts + src/lib/look.ts → createModelKit() / MODEL