# Topographic lines background > **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 full-bleed `` topographic map for a print-survey publisher ("Ridgeline Atlas"). Contour lines are drawn with marching squares over six drifting Gaussian hills, so the field reads as a real 1:25 000 sheet that is slowly breathing. Every fifth contour is heavier (an index line). Copy and a survey card sit in a pale elliptical scrim so the lines never fight the 112px headline. The detail worth copying: changing the contour interval (10 / 20 / 40 m) only changes the number of isolevels — the same height field is re-stroked instantly, like swapping the interval on a printed sheet. ## Reference behaviour 1. Initial state: the map is already drifting. Thin olive contours fill the frame; index contours (every 5th) are thicker and darker. A radial paper scrim sits under the left-hand copy. The 20 m interval chip is pressed. 2. Hills wander slowly (tens of pixels) so ridges slide rather than pulse. A faint sine ripple is added to the field so flats are never empty. 3. The bottom-right card ("Survey sheet 14 · Cairn Valley, north face") lists contour interval, highest point **2,814 m**, and relief **1,560 – 2,814 m**. 4. Clicking **10 m / 20 m / 40 m** sets `aria-pressed` on that chip only and redraws with 44 / 22 / 11 levels. Default is 22 (20 m). 5. **Pause drift** stops the animation loop and swaps the icon to a play triangle; label becomes "Resume drift". Click again to continue from the same phase. 6. A 14px amber ring at `right:226px; top:360px` is labelled "Cairn 2,814". 7. While the tab is hidden the loop is cancelled; it resumes on visibility without a jump. 8. Rendering is capped at 60fps. Phase `t` starts at 20 so the first frame is an interesting ridge, not a blank field. 9. With `prefers-reduced-motion: reduce`, drift starts paused (`playing = false`). Interval chips still retile. Colour transitions drop to 1ms. ## Structure ``` 1280 × 800 canvas (fixed, inset 0) + radial scrim + 20px neatline with map ticks ┌────────────────────────────────────────────────────────────────────────┐ │ nav 72 [glyph] Ridgeline Atlas Sheets Field notes Surveyors Print shop │ │ padding 0 44, gap 32 │ │ │ │ ALPINE SURVEY · AUTUMN 2026 EDITION (amber, 11/600 +0.16em) │ │ Every map begins with a │ │ patient line. 112px / .94 Newsreader │ │ sub 17px, max 440px │ │ [Browse the sheets] [How we survey] 44px buttons │ │ │ │ ○ Cairn 2,814 │ │ ┌ sheet 320px ──────────────┐ │ │ │ SURVEY SHEET 14 │ │ │ │ Cairn Valley, north face │ │ │ │ Contour [10m][20m][40m] │ │ │ │ Highest 2,814 m │ │ │ │ Relief 1,560 – 2,814 m │ │ │ │ [ Pause drift ] │ │ │ └ right 64, bottom 64 ──────┘ │ └────────────────────────────────────────────────────────────────────────┘ neatline inset 20px; ticks sit on the rule: 46°34′N / 8°11′E / 46°29′N / SHEET 14 · 1:25 000 / rotated 8°02′E on the left edge ``` - `` — fixed, full viewport, backing store `min(devicePixelRatio, 2)`. - `.scrim` — fixed, `pointer-events:none`, radial ellipse 620×380 at 34% 50%, paper at 92% opacity in the core to 0 at the edge. - `.neat` — 20px inset hairline (`--line-2`) with five `.tick` labels on paper chips. - `.page` — relative flex column, padding 20px, height 100%. - `