# Toast stack > **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 notification stack for a farm-operations app ("Loam"). Toasts arrive bottom-right; the newest sits in front at full size and pushes older ones up and back so they peek out 12px and 24px above it at scale 0.96 and 0.92, like a fanned deck of cards. Hovering (or tabbing into) the stack unfolds it into a normal list with 8px gaps and pauses every timer. Each toast has a 2px progress hairline in its tone colour that drains left-to-right over 5s; a dismiss button; an icon; a title and one line of detail. The detail worth copying is that the stacking, the unfolding and the pause are all driven by three custom properties and one class — no per-toast timers. ## Reference behaviour 1. Initial state: three toasts are already stacked — an info toast at the back, a success toast in the middle, an error toast in front ("Sync failed · Rig 2 telemetry could not reach the gateway. Retrying in 30 s."). Their progress hairlines are full and **paused** (they carry a `hold` class) so the first frame stays put in a gallery. The page shows a "Block 7 · Winter barley" field summary with three trigger buttons: Save field note (success), Sync telemetry (error), Schedule sprayer (info). 2. Click any trigger: the `hold` is released on the seeded toasts (their hairlines start draining) and a new toast enters from 16px below with opacity 0 → 1 over 240ms (expo-out). Every existing toast moves back one slot over 260ms: slot 1 = `translateY(-12px) scale(.96)`, slot 2 = `translateY(-24px) scale(.92)`; slots 3 and 4 are fully transparent and non-interactive; beyond 5 total, the oldest is dismissed. 3. Hover the stack: it expands. Every toast animates to its unfolded position (cumulative height + 8px gap, scale 1, opacity 1) over 260ms; all progress hairlines pause (`animation-play-state: paused`). Moving the mouse off collapses it again and the timers resume from where they were. 4. Tabbing into any toast's dismiss button expands the stack the same way (focus-within); tabbing out collapses it. 5. Progress: the hairline scales from 1 to 0 over 5000ms, linear, from the left edge. When it reaches 0 the toast leaves: 160ms fade with an 8px downward drift, then it is removed and the remaining toasts re-slot. 6. Click ×: same leave animation immediately. 7. Toast body text varies slightly per arrival (block number cycles 6–9 in the success message) so repeated clicks read as distinct events. 8. The hover region is exactly the front toast's box when collapsed and the whole unfolded column when expanded (the container's height is set explicitly by JS after each layout). ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────┐ │ Loam. Field log Rigs Blocks Weather Reports │ 56 ├──────────────────────────────────────────────────────────────────────────┤ │ │ │ Block 7 · Winter barley (DM Serif 40) │ │ one-line subtitle │ │ ┌ Area 14.2 ha ┐ ┌ Last sprayed 3 d ┐ ┌ Soil moisture 31 % ┐ │ │ [● Save field note] [● Sync telemetry] [● Schedule sprayer] │ │ hint line │ │ │ │ ┌──── 360 ─────┐ │ │ ┌┴──────────────┴┐ │ slot 2 −24px, .92 │ ┌┴────────────────┴┐ │ slot 1 −12px, .96 │ │ (!) Sync failed ×│ │ slot 0 front │ │ Rig 2 telemetry… │ │ │ │▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬│ │ 2px hairline │ └──────────────────┘ │ 24px from right/bottom └──────────────────────────────────────────────────────────────────────────┘ expanded on hover: three full toasts stacked with 8px gaps, bottom-anchored ``` - `
` — 56px, brand "Loam." (serif 22, accent full stop), nav. - `
` — `

`, `.sub`, `.field` grid of three `.card` stats, `.row` of three `