# Paper cutout steps > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A "how it works" section for "Hamper & Hill", an invented picnic delivery service. On the left, an open pop-up book: an upright backdrop page and three cut-paper layers (far hill, near hill, foreground props) stand on a flat floor page with a teal cover. On the right, four step cards on solid paper. Choosing a step folds the old scene flat and makes the new one rise from its hinges, back to front, with a small overshoot, like a page turned in a pop-up book. Each layer drifts against the pointer by its own depth. The detail worth copying is that every layer is a full-stage SVG with its own `transform-origin` at its baseline, so one `rotateX` per layer is the whole fold. ## Reference behaviour 1. First frame: step 1 "Drop a pin" is selected; its card is the solid `#FFFAF0` card with shadow and a tomato bookmark notch; scene 1 (morning sky, sun with dashed rays, hills, a dotted path and a red map pin) stands. 2. Hover, focus or click a card (desktop) selects it. The old scene's layers fold to `rotateX(-88deg)` and fade in 320ms; the new scene's four layers rise from `rotateX(-88deg)` to `none` in 760ms with `cubic-bezier(.34,1.42,.52,1)`, staggered 0, 90, 180, 270ms (back to front). 3. Pointer over the section (mouse only): `--mx` and `--my` run −1 to 1 from the active scene's centre, inverted. Each layer translates `mx × d` px and `my × d × 0.45` px with d = 1 (floor), 2, 5, 9, 14. Transition 380ms `--ease`. Leaving the section resets to 0. 4. Phone (≤ 860px): every step carries its own scene above its card. An IntersectionObserver (`threshold: [0, .4]`) raises a scene at 40% visible and folds it again once it fully leaves, so scrolling back replays it. 5. Reduced motion: no transitions. Desktop shows the selected scene standing; phone shows all four standing. 6. The CTA "Book a Saturday picnic" sits under the cards with "April to September, 11.00 to 15.00". ## Structure ``` 1280 × 800, .how grid 572px | 1fr, column gap 72, padding 52 64 40 ┌──────────────────────────────┬───────────────────────────────────┐ │ Hamper & Hill picnic delivery│ ▶(1) Drop a pin [card on] │ │ Lunch on the grass, │ Choose a park ... │ │ and nothing to carry. 54px │ 34 parks and greens mapped │ │ ┌ scene 572×534 @ 64,214 ──┐ │ (2) Fill the basket │ │ │ page 38..398 backdrop │ │ (3) We lay the blanket │ │ │ far hill base 420 │ │ (4) Leave it on the grass │ │ │ near hill base 442 │ │ │ │ │ props base 474 │ │ (Book a Saturday picnic) Apr–Sep │ │ │ floor page 398..530 │ │ │ │ └──────────────────────────┘ │ │ └──────────────────────────────┴───────────────────────────────────┘ viewBox of every layer: 0 0 600 560 ``` - `

` grid: `.head` (kicker `

`, `