# Optimistic like button > **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 like button on a social post card (product: "Marrow", a kitchen-ops app) that behaves optimistically: the UI commits first and asks the server second. The heart fills coral with a 420ms overshoot bounce and eight tiny particles fly outward (pure CSS, no canvas); the count ticks up on the same frame. A fake request resolves 700ms later. If a "Simulate request failure" switch is on, the request logs a 503 and a dark toast slides up offering **Undo**; if the user does nothing, a 3px progress bar drains over 5s and the like rolls back automatically. The detail worth copying is that failure does not snatch the like away instantly: the optimistic state is kept, explained, and reversible. ## Reference behaviour 1. Initial state: a 560px post card (avatar initials, name, handle, "2h", a two-line post, three pill tags, an action row: heart 1,284 · comment 96 · Share · save). To the right, a 300px "Demo controls" panel with the failure switch (off) and a request log seeded with `01 GET /posts/8123/like 200`. 2. Hover the like button: background `--heart-soft`, icon and count turn `--heart`. Other actions hover to `--card-2` / `--ink`. 3. Click like: on the same frame the heart fills (`fill` + `stroke` → `--heart`), scale-bounces (1 → 1.35 → .9 → 1.08 → 1 over 420ms), eight particles emit from the heart centre at 45° increments travelling 26px outward while shrinking to 20 % and fading over 520ms (odd particles coral 4px, even particles amber 3px), the count becomes 1,285 with a 6px rise-in over 240ms, `aria-pressed` becomes `true`, and a log entry `POST /posts/8123/like pending` appears in amber at the top of the log. 4. 700ms later the log entry resolves: `201` in green (success) or `503` in coral (failure switch on). 5. On failure the toast slides up from 12px below to rest at `bottom:32px` over 280ms: title "Couldn't save your like", sub-line "Kept it for now. Undo, or it rolls back in 5s.", a coral **Undo** button and a dismiss X. A 3px coral bar along the toast's bottom edge drains from full to zero over 5000ms (linear). 6. Pressing **Undo** (or waiting the 5s) un-fills the heart with no bounce, decrements the count, hides the toast and logs `rollback local`. Pressing X dismisses the toast but keeps the like (and cancels the auto-rollback). 7. Clicking the filled heart un-likes: count decrements, no bounce, no particles, log `DELETE … pending` → `204` (or `503` with no toast, since there's nothing to keep). 8. Clicking like again replays the whole animation; the burst and bounce restart from zero every time. 9. The log keeps the six most recent entries. ## Structure ``` 1280 × 800 (card + panel centred as a group, 48px side padding) ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌ card 560 ───────────────────────────────┐ ┌ panel 300 ─────────┐ │ │ │ (PN) Priya Natarajan 2h │ │ DEMO CONTROLS │ │ │ │ @priya · Marrow Kitchen │ │ Simulate failure (o)│ │ │ │ │ │ REQUESTS │ │ │ │ Finally moved our whole prep board … │ │ 03 POST … pending │ │ │ │ Small wins. (17px) │ │ 02 DELETE … 204 │ │ │ │ [batch cooking] [week 38] [kitchen ops] │ │ 01 GET … 200 │ │ │ │ ──────────────────────────────────────── │ └────────────────────┘ │ │ │ ♥ 1,284 ◌ 96 ↑ Share ▯ │ │ │ └──────────────────────────────────────────┘ │ │ │ │ ┌ toast 360+ ────────────────────────────┐ │ │ │ Couldn't save your like [Undo] × │ bottom 32 │ │ │ Kept it for now. Undo, or it rolls… │ │ │ └━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘ 3px drain │ └──────────────────────────────────────────────────────────────────────────┘ ``` - `` grid `560px 300px`, gap 32px, `justify-content:center`, vertically centred. - `
` → `.who` (40px avatar, name/handle, `