# Checkbox draw list > **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 pre-trip checklist in a fictional notes app, Margin. The list sits on a ruled sheet with a salmon margin line; each checkbox lives in the margin, and ticking it draws a red-pencil checkmark (280ms stroke) followed by a pencil line sweeping through the task text (360ms, 180ms later). A huge light-weight serif numeral on the left counts tasks done, with a row of nine tick segments underneath. It should feel like crossing things off a paper list: quiet, satisfying, slightly analogue. The detail worth copying is the sequencing: the check finishes before the strike starts, so the eye follows one stroke into the next. ## Reference behaviour 1. Initial state: nine tasks, five ticked (rows 1, 2, 3, 5, 7). Numeral reads "5", suffix "of 9", five red tick segments, note "4 left. Flight TP1351 leaves Thursday at 06:40." Header right reads "5 done · 4 to go". 2. Click anywhere on a task row (the whole row is the ``): the native checkbox toggles. 3. Ticking: the 18px rounded square dims from ink to `--ink-3`; the checkmark path draws from 0 to full length in 280ms; after a 180ms delay a 1.5px red line scales from 0 to full width across the task text, origin left, over 360ms; the text colour fades to `--ink-3`. 4. Unticking: checkmark retracts over 280ms and the strike retracts immediately (no delay) over 360ms; text returns to ink. 5. Each change updates the numeral (it re-enters from 18px below at 20% opacity over 420ms), the "of N" suffix, the tick segments, the header summary and the note. 6. When all tasks are done the note becomes "All set. Boa viagem — see you on the 15th." 7. Type in the "Add a task and press Enter" row and press Enter: a new unticked row (tag "New") slides in from 8px above over 360ms; totals update. The list caps at 10 rows; the oldest-last row is dropped to keep the sheet in frame. 8. "Untick all" in the footer clears every box, replaying all retract animations together. 9. Hovering a row turns its checkbox square red. ## Structure ``` 1280 × 800, padding 48 64 48 72, grid 400px | 1fr ┌───────────────────────────┬───────────────────────────────────────────────┐ │ MARGIN Sat 3 Oct │ ┌─────┬─────────────────────────────────────┐ │ │ │ │ │ Packing & errands 5 done · 4… │ │ 72 │ Before Lisbon (64 ital.) │ ├─────┼─────────────────────────────────────┤ │ │ sub, 300px max │ │ [✓] │ ~~Scan passport and send…~~ Docs │ │ 56 each │ │ │ [ ] │ Change €60 into coins… (Wed) Money│ │ │ │ │ … │ nine rows │ │ │ 5 │ │ + │ Add a task and press Enter │ │ │ of 9 (232px / 48px) │ │ │ hint Untick all │ │ │ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ticks │ └─────┴─────────────────────────────────────┘ │ │ 4 left. Flight… │ margin line at x = 64px inside the sheet │ └───────────────────────────┴───────────────────────────────────────────────┘ ``` - `