# Stack drop mini-game > **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 Cairn is a one-tap timing game: a stone slab slides side to side above a cairn on a mountain ridge, and a tap (or Space) sets it down. Whatever hangs past the stone below is sliced off and tumbles away with gravity and spin; a drop within 4px of perfect keeps the full width and starts a glowing combo. The slide speeds up with every stone, the camera climbs with the cairn, and the sky slowly goes from dusk peach to night blue over 30 stones while stars brighten. It is drawn flat in 2D on a canvas, art-directed rather than neon: eight earthy stone tones with a lit top lip and a shadow lip, three parallax ridges, a low moon, and a quiet HUD in Bricolage Grotesque with Geist Mono labels. The detail worth copying is how calm the frame stays while the game speeds up: one big score, one hint pill, dialogs only when paused or over. Dialogs follow iOS 26-ish sheet proportions (28px radius, sheet curve). ## Reference behaviour 1. **Ready** (first frame): the board is visible with three foundation stones (220, 198 and 176px wide) on a dark rock plinth, and the first stone sliding slowly (110 px/s) with a 2px bob. A pill at the bottom says "Tap to set the stone" with a pulsing ember dot and a SPACE key cap. Score 0, BEST 0. 2. The first tap, Space, Enter or ↓ drops the stone and starts **play**; the hint fades out (300ms). 3. Each new stone enters from alternating sides at the canvas edge (x = 8 or 382 − width) and bounces between those edges. Speed is `min(460, 150 + 10 × score)` px/s. 4. **Drop**: compare the stone's left edge with the top stone's. - |dx| ≤ 4px: **perfect**. The stone snaps into line and keeps its width; the combo goes up; a warm `#FFD9A0` outline expands from the stone and fades over 700ms, thicker and wider for longer combos. From ×2 on, a bone pill "Perfect ×N" pops at the top of the screen (900ms). - Partial overlap: the stone is trimmed to the overlap; the cut piece becomes a falling chip (gravity 1,900 px/s², spin ±2.2 rad/s away from the cairn). The combo resets. - No overlap: the whole stone falls (spin ±1.2 rad/s) and the game is **over** 650ms later. 5. After each placed stone the score bumps (scale 1 → 1.12 → 1, 240ms) and the camera target rises so the top of the cairn sits about 380px above the ground line; the camera eases toward it at `6·dt` per frame. 6. **Pause**: the round button (top right), P or Escape. The loop stops (`cancelAnimationFrame`), a scrim (`rgba(10,13,24,.72)`) and a bone sheet "Paused · height 7 / The wind can wait." appear with Resume and "Start a new cairn". P or Escape resumes. Leaving the tab pauses automatically. 7. **Game over** sheet: "Game over · dusk on the ridge", "The cairn held 12 stones.", Score and Best tiles (40px figures), a "NEW BEST" tag when beaten, "Stack again", and "Longest perfect run N · Enter to restart". Enter or Space restarts. The loop stops 1.2s after the sheet appears. 8. Best lives in memory only and survives restarts, not reloads. ## Structure ``` 390 × 844 · canvas fills the viewport; HUD and sheets are DOM on top ┌──────────────────────────────────┐ │ 54px clear │ │ CAIRN 12 ( ‖ ) │ HUD grid 96px | 1fr | 96px, top 58px │ BEST 18 │ score 76px, BEST 12px mono │ │ │ · stars · ( moon )│ moon r22 at (310, ground − 300) │ │ │ [==stone==] → │ moving stone, 28px row (24 visible + 4 lip) │ [===stone===] │ │ [====stone====] ╱╲ ridges │ three ridges, parallax .08 / .2 / .45 │ [=====stone=====] │ │ [======stone======] │ foundation 220 / 198 / 176 │ ┌──────── plinth 270 ───────┐ │ ground line = viewport height − 196 │ │ [• Tap to set the stone SPACE]│ hint pill, bottom 58px │ └───────────────────────────┘ │ │ 34px home indicator │ └──────────────────────────────────┘ Sheets: bottom-aligned, width min(358px, 100%), 16px gutters, 34px bottom inset. ``` - `canvas role="img" aria-label="Cairn stacking game board"`, sized to `innerWidth × innerHeight` at up to 2× DPR. The 390px play column is centred with `ox = (W − 390) / 2`, so on wide screens the sky and ridges fill the rest. - `header.hud`: wordmark, score (`aria-live="polite"`), best, pause `