# Scroll exploding product grid > **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 landing block of a product drop for a fictional desk-goods shop, Plinth Supply: twelve objects (lamp, notebook, pen, cup, clock, stapler and so on), each a card with a drawn product on a tinted ground, a name, a maker, a price and an add button. On load the cards lie scattered across the lower two thirds of the screen, tilted −18° to +16° and slightly scaled, like a pile tipped onto a desk under the headline. The section is pinned for 260vh; as you scroll, the cards fly into a 6-column, 2-row grid, staggered left to right and row by row, their shadows shrinking as they land. Scrolling back scatters them again. The detail worth copying: the scatter is a composed layout (target points as fractions of the stage), converted to per-card pixel offsets by measuring each card's grid slot once, so the pile looks art-directed at any width while CSS does all the motion from one `--t`. ## Reference behaviour 1. Initial frame (1280×800): 56px nav ("plinth" in Krona One, Desk/Paper/Light/Journal, and an outlined "Bag 0" pill). Under it, the kicker "Autumn drop · Ships 4 November" in red caps, the 46px Krona One headline "Twelve objects for a desk that works as hard as you do.", a 15px note on the right ("Made in small runs by nine workshops between Porto and Tallinn. Scroll to put the desk in order.") and a small status "Scattered". Below, the twelve cards scattered and overlapping, several running off the bottom and side edges; shadows deep (22px offset, 40px blur, 20% alpha). 2. Scroll through the 260vh section: `--t` goes 0 → 1 (view timeline, `contain 0%` → `contain 100%`); the stage stays pinned. 3. Each card has a delay `dl = (i mod 6) × 0.045 + floor(i / 6) × 0.07` (0 to 0.295). Its progress `e = clamp(0, (t − dl) / 0.46, 1)`, eased out as `q = e(2 − e)`, and the remaining scatter `u = 1 − q` scales its offset, rotation, scale delta and shadow. 4. By `t ≈ 0.76` every card is in its slot; the grid then holds for the rest of the pin. The status reads "Gathering N%" while moving and "In order" at the end. 5. Hover a card: it lifts 4px (240ms). Its `+` button (32px, 1.5px ink ring) fills ink on hover; click toggles it to a red filled state with the plus rotated 45° into an ×, and the Bag count goes up or down with a 360ms bump on the badge. 6. After the pin, the page continues with a ruled band: "Everything in the drop ships in one box, wrapped in its own offcuts." and delivery copy. 7. Scrolling back up runs the same mapping in reverse; the cards explode back to their composed scatter. 8. On resize (and after web fonts load) the scatter offsets are re-measured so the pile keeps its composition. 9. Without scroll-timeline support, JS writes `--t` from the section's rect on scroll; everything else is the same CSS. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ plinth Desk Paper Light Journal ( Bag ⓪ ) │ 56 ├──────────────────────────────────────────────────────────────────────┤ │ AUTUMN DROP · SHIPS 4 NOVEMBER │ stage: sticky, 100vh │ Twelve objects for a Made in small runs … │ padding 28 48 40 │ desk that works as hard as you do. Scattered │ gap 24 │ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐ │ │ │ ph ││ ││ ││ ││ ││ │ 6 cols, gap 16, rows 1fr │ │ │name││ ││ ││ ││ ││ │ (~184 × 256 at 1280) │ │ └────┘└────┘└────┘└────┘└────┘└────┘ │ │ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐ │ │ └────┘└────┘└────┘└────┘└────┘└────┘ │ └──────────────────────────────────────────────────────────────────────┘ section .drop height 260vh; stage overflow hidden (scattered cards are cropped) ``` Composed scatter (centre x, centre y as fractions of the stage, rotation, scale), in card order: (.09,.62,−12°,1) (.26,.88,9°,1.05) (.41,.58,−6°,1.08) (.58,.84,14°,.95) (.74,.60,−9°,1.05) (.91,.86,11°,1) (.02,1.04,−15°,.95) (.17,1.12,6°,1) (.50,1.10,−13°,.9) (.70,1.10,8°,1.05) (.97,.55,−18°,.92) (.34,1.02,16°,.95). Every point sits below y 0.5 so no card ever crosses the headline. - `

` with brand, `