Gatefold

Field notes

A how-it-works page that is a pop-up book. Each step is a spread you turn to: drag the corner and the page lifts, its paper pieces fold flat, and the next scene stands up. Pull a tab, turn a paper wheel, tap a city.

• 3D
• Pointer interaction
• SaaS
• Light theme

Gatefold is the how-it-works page of Larkspan, a fictional static-site host, drawn as a cloth-bound pop-up book on a desk. Each of its five spreads is one step: the words on the left page, a paper-cut scene on the right. Drag the corner and the page lifts and turns about the spine; its pieces fold flat as it goes, and the next scene springs up as the page passes upright. The opening spread has a contents list that jumps to any step, and a step bar sits under the book.

Every step has something to do with your hands, like a real pop-up book. Pull a gold tab and three files fly into the folder; turn a paper wheel and the gears run the build until the deploy card reads live; tap a city pin and a dotted line carries the ping to your URL; pull the tab on the page's edge and the house floats off under its balloon. A tiny synth rustles the paper, clicks the wheel and rings the pings. It is plain DOM with CSS 3D, no WebGL: the words stay real text, keyboard users reach every toy, reduced motion turns pages without rotation, and on a phone the book shows one page with the words below it at full size.

How it's built

• One number drives the book: pos, the open spread, from 0 to 4. Four sheets turn about the spine at −180° × clamp(pos − k), each a hair apart along its own normal so the stacks on both sides layer the right way. Sheet k carries spread k's scene on its front and spread k + 1's words on its back, so the words arrive on the left page as the sheet lands.
• A spread's pieces rise over the half-turn before it opens and fold over the half-turn after, each with its own delay and a small overshoot, so a lifting page folds its scene flat and the next one springs up once the page has passed upright. Every piece is an SVG card that stands facing you on its base line.
• The paper of a turning page sits in its own layer with backface-visibility hidden. On the 3D face itself, Chrome dropped the paper mid-turn and left the pop-ups floating in the air.
• The state keeps only what was asked for and when: a turn, a drag, a pull, a let-go wheel, a ping, a lift. A frame function derives every angle from it and the time, so the 10-second preview is the same state built from a script, played only in capture; the live page waits for the reader.
• A Node check proves the copy fits, the sheets stack and stand at the right moments, a flick never turns more than one spread, the wheel's coast is bounded, the loop's second 10 equals second 0 and nothing jumps in 1 ms steps, and the toys reset only while their page is out of sight.

Inside the prompt

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

gatefold-how-it-works/
├─ .gitignore
├─ check.ts
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Book.tsx
   │  ├─ Copy.tsx
   │  ├─ Page.tsx
   │  ├─ Stage.tsx
   │  └─ Toys.tsx
   └─ lib/
      ├─ book.ts
      ├─ copy.ts
      ├─ live.ts
      ├─ look.ts
      ├─ loop.ts
      ├─ pieces.ts
      ├─ sound.ts
      └─ time.ts

Recut it

• Rename the product and rewrite the five spreadssrc/lib/copy.ts + index.html → SPREADS / COPY / <title>
• Redraw or move the paper piecessrc/lib/pieces.ts → STAGES
• Re-colour the book, the paper and the piecessrc/lib/look.ts + src/index.css → COLORS / --gf-…
• Change the tilt, the turn speed and the toys' timingssrc/lib/look.ts → TILT / TURN / PULL / WHEEL / LIFT
• Retime the 10-second toursrc/lib/book.ts → tourState
• Turn the sounds off by defaultsrc/lib/sound.ts → on
• Check the loop still closes and the copy fitscheck.ts → pnpm check