# Bottom sheet with three detents > **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 The "Nearby" sheet from "Halden", a local-places app, sitting over a map. The sheet is a full-height panel translated down so that only a chosen amount is visible; it rests at three detents: **peek** (120px visible), **half** (430px) and **full** (782px, i.e. top edge 62px from the top of the phone). You drag it by its header with pointer events; on release it snaps to the nearest detent, or flicks one detent in the direction of a fast release. A scrim darkens the map only between half and full, in proportion to progress. Map pins and list rows are linked: tapping a pin selects the row and brings the sheet to half. The map is entirely CSS (gradients for roads, rounded blocks for parks and a lake), so there are no image dependencies. ## Reference behaviour 1. Initial state: sheet at **peek** (120px). Grabber, "Nearby · 18 places · 400 m" heading and the filter chips are visible; the list is below the fold. First pin ("Brød & Bønner") is pressed and its row is highlighted in `--accent`. Scrim opacity is 0. 2. Drag the header up: the sheet follows the pointer 1:1 with no transition. Past **full** the movement is damped to 25% (rubber band); the same below **peek**. 3. Release slowly: the sheet snaps to the nearest detent over 480ms `cubic-bezier(.32,.72,0,1)`. 4. Release fast (|velocity| > 0.4 px/ms): the sheet moves one detent in the flick direction regardless of where it is, clamped to the ends. 5. Between half and full the scrim's opacity rises linearly from 0 to 0.38 (`--scrim` = `#17191c`). Below half it is exactly 0 and `pointer-events:none`. 6. At full, tapping the scrim returns the sheet to half. 7. With the header focused, ArrowUp moves one detent up and ArrowDown one detent down. 8. Tap a map pin: the pin scales to 1.18, its row gets the accent name colour, the sheet snaps to half and the row scrolls into view. Tap a row: it becomes selected and the matching pin (if any) presses. 9. Chips are single-select (`aria-pressed`); the pressed chip fills with `--ink`. 10. The list scrolls independently inside the sheet once the sheet is at half or full; the header remains the only drag surface. ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54 status) │ │ 62 ┌ glass search pill 48 ───────────┐ │ │ │ ⌕ Near Grünerløkka, Oslo │ │ │ └─────────────────────────────────┘ │ │ ┌──┐ park ┌──┐ ▼ pin │ map: roads = white gradients, │ │ │ ▼ pin │ │ │ parks #D3E3C8, lake #C9DCE6 │ └──┘ ─────── road ─┴──┴────────── │ │ ▼ pin park │ │ lake │ │ ───────────────────────────────────────│ ← full: top at 62 │ ▓▓▓▓▓▓▓▓▓▓ scrim 0→.38 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ ┌───────────── ▬ grabber ─────────────┐│ ← half: 430 visible │ │ Nearby 18 places · 400m││ │ │ [All] [Coffee] [Bakeries] [Open now]││ ← peek: 120 visible │ │──────────────────────────────────── ││ │ │ ◼ Brød & Bønner 4.8 · Bakery 120 m││ │ │ ◼ Vollen Park Kiosk 4.3 · ... 160 m││ │ │ ... ││ │ └─────────────────────────────────────┘│ └────────────────────────────────────────┘ ``` - `.map` (`aria-hidden`): absolute, full bleed; background is a stack of `linear-gradient` roads over a 64px `repeating-linear-gradient` grid on `--map`. Children: two `.park` rounded blocks, one `.water` blob (420px, `border-radius:48% 52% 40% 60%`, rotated −14°), three `.blk` building blocks, three `.lbl` street labels. - Three `