Burrow

Field notes

A team page that is a mole burrow cut open. Each teammate is a round clay mole in its own lit room: hover and it pops out to wave, click for its card. Turn the lights off and they fall asleep, take a team photo, or drop a snack and watch one catch it.

• 3D
• Pointer interaction
• Light theme

Burrow is the team page for Loamhouse, a fictional product studio, drawn as a block of clay soil with a room dug out for every member. Each mole has its own coat, accessory and prop (a mug, an easel, a laptop it types on), breathes, sways and blinks, and turns its head to follow your pointer. Hover a room, or a card in the list below, and that mole hops forward and waves; click and its profile card springs up. The spare room holds a "We're hiring!" sign and a shovel.

Three things to play with. Lights off fades the page to night: the lamps glow, the moles fall asleep and the Zzz drift up, and any mole you hover wakes to wave. Team photo brings everyone forward, paws up, for a flash. Click the soil and an acorn or a worm falls; the nearest mole looks up, catches it, chews with puffed cheeks and sends up a heart. The list is the accessible team: real buttons, a dialog that takes and returns focus. Reduced motion stills every idle motion, the heads and the camera, and cuts every change; without WebGL the list and the lights are the page.

How it's built

• Every mole is the same handful of spheres: a squashed body, a lighter belly, a snout and nose, glossy eyes, blush, spade paws on turning shoulders. Three eye sets (open, happy arcs, sleepy arcs) are swapped rather than animated, and the coat, the accessory and the prop come from the team list, so a new teammate is one line of copy.
• The soil is one ExtrudeGeometry: a rounded rectangle with a rounded hole per room, bevelled so every opening has a soft clay lip. A room is a pastel back wall, a floor and a lamp whose point light only rises at night. Soft PCF shadows from one warm key light and a RoomEnvironment are most of the clay look.
• The state keeps only when things were asked for (a hover, the lights, a photo, a snack) and frame(state, t) derives every pop, sleep, wave and fall from it. Pops and fades are smoothsteps that end exactly, so a hover that reverses midway carries on from where it was, and the 10-second tour closes on itself.
• The tour is the same state built from a script, so the preview and the live page share every line of motion; the first touch hands the tour's state over mid-move. A Node check asserts that second 10 equals second 0 and that nothing jumps in between, in 1 ms steps.
• Heads blend three targets: the pointer, a snack on its way, and the camera during the photo, weighted by how eager and how posed the mole is, and multiplied away while it sleeps. The page's own colours follow the lights through one CSS variable the frame loop writes, so the page and the burrow fade together.

Inside the prompt

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

burrow-team/
├─ .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
   │  ├─ layout.ts
   │  ├─ live.ts
   │  ├─ look.ts
   │  ├─ loop.ts
   │  ├─ time.ts
   │  └─ timeline.ts
   └─ scene/
      ├─ burrow.ts
      ├─ mole.ts
      ├─ paint.ts
      └─ snack.ts

Recut it

• Rename the studio and rewrite every stringsrc/lib/copy.ts + index.html → COMPANY / NAV / COPY / <title>
• Your team: names, roles, bios, links (1–8 members)src/lib/copy.ts → TEAM
• Give a mole a different coat, room colour, accessory or propsrc/lib/copy.ts → TEAM[n].fur / room / dot / accessory / prop
• Change the open role, or remove the hiring roomsrc/lib/copy.ts → HIRING (null for none)
• Re-colour the soil, the grass and the nightsrc/lib/look.ts + src/index.css → CLAY / LIGHT / --bg …
• Retime the pop, the lights, the photo and the snackssrc/lib/look.ts → TIMING
• Retime the 10-second toursrc/lib/timeline.ts → TOUR
• Check the loop still closes and the copy still fitscheck.ts → pnpm check