# Throwable sheet with spring 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 home screen of "Nightjar", an invented late-night food map for the fictional harbour town of Portmore. A drawn SVG street map fills the screen; a warm off-white bottom sheet lists "14 kitchens open past 11". The sheet has three detents (full, half, peek) and you throw it: the speed of your finger at release decides where it lands, and a spring you integrate yourself, not a CSS curve, carries that speed into a small overshoot and a settle. The filter chips in the sheet are throwable too: flick one up and it flies off spinning, the row closes the gap, and Undo springs it back in. iOS 26-ish language: glass search pill, 22px sheet radius, spring motion. Worth copying: velocity projection to pick the detent, and handing the release velocity to the spring so the motion is continuous with the hand. ## Reference behaviour 1. First frame, 390 × 844 (the Lounge draws the status bar). Full-bleed SVG map: beige land `#ECE6DA`, blocks `#E2DACB`, a river `#9FC3CC` crossing at y ≈ 270–380, a park, white roads with `#D3C9B7` casing, two district labels ("OLD QUAY", "ROPEWORKS", 10px/700, 2px tracking, `#4F493F`), five coral pins numbered 1–5 and a blue "you" dot with a 22px halo. 2. Top, at 58px: a 48px glass search pill "Search Portmore" and a 48px ink avatar "IV". A 48px round locate button floats 64px above the sheet's top edge on the right. 3. The sheet rests at the **half** detent (top = 48% of viewport height, 404px at 844). Contents: 24px handle zone with a 40 × 5 grabber; heading "14 kitchens open past 11" (22/800) with "Fri 22:48" at right; sub-line "Within 15 minutes on foot of Harbour Street"; a horizontally scrolling chip row ("Open now" and "Noodles" selected, ink fill; "Under £15", "Takeaway", "Vegetarian", "Seats 4+" outlined); a hint "Flick a filter up to drop it" with an up arrow; then seven place rows. 4. Press anywhere on the sheet (outside chips) and drag: the sheet top follows the finger 1:1. Past the full or peek detent it rubber-bands: `limit ± (1 − 1/(d·0.55/200 + 1))·200`. 5. Release: compute velocity from the last 80ms of pointer samples. Project the resting point `y + v · 0.2s`, pick the nearest detent to that projection. If `|v| > 900 px/s` and the nearest is the current detent, move one detent in the throw's direction anyway. 6. The sheet then runs a spring from its current top to the chosen detent, starting with the release velocity: stiffness 420, damping 28, mass 1 (damping ratio 0.68). A firm upward throw from half overshoots full by about 10px (top reaches ≈ 54px), then settles at 64px in roughly 450ms. 7. The map scrim (`#1D1B18`) fades from 0 at half to 0.32 at full, driven by the live sheet position, not a separate animation. The locate button rides 64px above the sheet and hides above the half detent. 8. At **full** (top 64px) the list becomes scrollable; dragging the header still moves the sheet. At half and peek the list does not scroll; the whole sheet is the drag handle. 9. Tap the grabber (movement under 6px): half goes to full; full or peek go to half. 10. Chips: tap toggles selection and the heading count updates (e.g. deselecting "Noodles" reads "16 kitchens open past 11"). 11. Drag a chip vertically (more than 8px, mostly vertical): it follows the finger and tilts `dx · 0.08°`. Release beyond 70px or faster than 700 px/s: it keeps flying at max(1600, |v|) px/s in that direction, spins 260°/s and fades over ~310ms. Its slot then collapses to 0 width in 280ms on the iOS curve; the hint fades away for good. 12. Release a chip short of that: it springs home (k 600, c 24, m 1) from where it is, with the release velocity. 13. A toast slides in at top 118px: ink pill, "Removed “Noodles”" and an "Undo" button. It stays 4s. 14. Undo: the slot reopens, the chip appears 56px above its place and springs down into it with 900 px/s of initial velocity, so it lands with one small bounce; the count restores. 15. Keyboard: the grabber is a button; ArrowUp and ArrowDown move one detent (with a synthetic 1400 px/s so the spring feels the same), Enter toggles half/full. On a chip, Delete or Backspace throws it upward and moves focus to Undo. 16. Reduced motion: no springs, no overshoot. The sheet moves with a 200ms standard-ease transition; chips disappear with no flight and the slot closes at once. ## Structure ``` 390 × 844 ┌───────────────────────────────────────┐ │ 54 status (Lounge) │ │ [ ⌕ Search Portmore ] (IV) │ 58–106 .top, fixed │ │ │ SVG map · pins 1–5 · you dot │ full-bleed, preserveAspectRatio slice │ ~~~~~~~~ river ~~~~~~~~~~ (⌖) │ locate: top = sheetTop − 64 ├───────────────────────────────────────┤ ◄ sheet top: 64 | 405 | 668 │ ▬▬▬▬ (40×5) │ handle 24 │ 14 kitchens open past 11 Fri 22:48 │ h1 22/800 │ Within 15 minutes on foot of … │ │ (Open now)(Under £15)(Noodles)(Take…→ │ chips 40 tall, x-scroll │ ↑ Flick a filter up to drop it │ │ ───────────────────────────────────── │ │ [tile] Salt Lamp Ramen 4.7 │ rows 52 tile, 12 pad │ Tonkotsu, gyoza … till 01:00 │ │ … │ └───────────────────────────────────────┘ ``` - `
` with an Undo `