# Before and after restoration slider > **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 features section of "Morrow", an invented service that restores scanned family prints. One large comparison (788 × 520 at 1280) shows a drawn 1974 seaside photograph: the left side is the scan with an orange cast, dust, two long scratches, a diagonal fold and film grain; the right side is the restored image. A safelight-red round handle drags the divider. Beside it, three proof chips (dust, colour cast, fold) carry a measured number each and double as switches: turning one off puts that defect back on the restored side, so the chips prove what each fix did. The mood is a darkroom: warm near-black, one red. ## Reference behaviour 1. Initial state: divider at 50%. After 400ms the divider sweeps once 50% → 30% → 64% → 50% over 1600ms (expo-out) to show it moves. No other motion runs. 2. Pointer: pressing anywhere on the comparison jumps the divider to the pointer and captures it; moving drags it; release ends. The knob scales to 1.08 while dragging and on hover. Vertical page scroll on touch still works (`touch-action: pan-y`). 3. Keyboard: the knob is a focusable `role="slider"`. Left/Down −2, Right/Up +2, with Shift ±10, Home 0, End 100. `aria-valuenow` and `aria-valuetext` ("38 percent original scan") follow. 4. Any drag or key cancels the intro sweep immediately. 5. Chips start pressed (fix on). Clicking "Colour cast" puts the warm cast filter back on the restored side; "Dust and scratches" shows the specks and scratches there; "Fold line" shows the crease. An off chip's number turns `--ink-3` and is struck through; its switch slides left and greys. 6. The line under the chips reports "3 of 3 fixes on. Switch one off to see what it did." or "1 of 3 fixes on. The right side now shows the scan without those fixes." 7. Corner tags read "Scan, 1974" (left) and "Morrow" (right). A mono caption under the image gives the file name and size, and the hint "Drag, or focus the handle and use the arrow keys". ## Structure ``` 1280 × 800 ┌─────────────────────────────── wrap 1200 max, padding 36 / 44 ──────────────────────────────┐ │ MORROW · PRINT RESTORATION (mono 12) │ │ Fifty years of dust, gone │ Morrow finds dust, scratches… (360px col) │ │ in 3.8 seconds. (60px, 800) │ [Restore 20 scans free] then £4 a month │ │ │ │ ┌──────────────── compare 1fr × 520 ──────────────┬─┐ ┌──── aside 300 ─────┐ │ │ │[SCAN, 1974] ┃ [MORROW] │ │ │ FIXES ON THIS SCAN │ │ │ │ warm, dusty, ┃ clean, │ │ │ Dust and scratches │ 214 marks │ │ │ creased, grain (◂▸) restored │ │ │ Colour cast │ 18.4 to 2.1 ΔE │ │ │ ┃ │ │ │ Fold line │ 31 cm rebuilt │ │ └─────────────────────┃───────────────────────────┘ │ │ 3 of 3 fixes on. │ │ │ file caption (mono) hint (mono) └────────────────────┘ │ └───────────────────────────────────────────────────────────────────────────────────────────────┘ stage grid: 1fr 300px, gap 24 · knob 44 round · divider 2px ``` - `
`: two-column grid (`1fr 360px`, gap 40, bottom-aligned): kicker `

`, `

`, intro `

` and the primary `