# Dot wave 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 `` background for a dark infrastructure-product hero ("Tidewater"). Dots sit on a strict 24px grid; a slow diagonal sine wave rolls across them, and each dot's radius, opacity and vertical offset follow the wave height, so the field reads like swell seen from above. The detail worth copying is the **quiet zone**: an elliptical mask centred on the headline drops dot opacity to 30% behind the copy, so the motion lives in the empty right half and never competes with the 96px headline. Clicking empty space sends a single ring-shaped ripple out from the pointer. ## Reference behaviour 1. Initial state: the page is already animating. A bright diagonal crest crosses the right half of the frame; dots at the very top of the crest are tinted mint `#8FE3B9`, the rest are pale `#CFE0D6`. 2. The wave travels continuously from lower-right to upper-left at a calm pace (one full crest passes any point every ~10.5s). 3. Behind the headline, sub-copy and buttons the dots are dimmed to 30% of their normal opacity, fading back to 100% by the edge of a 1040 × 480 ellipse centred at (400, 340). 4. Click (pointerdown) anywhere that isn't a link or button: a ring ripple expands from that point at 160px/s, decays over ~6s, and stacks with the base wave. At most 4 ripples are alive; the oldest is dropped. 5. The round 40px button at the top-right (next to the hint "Click the field to send a ripple") pauses and resumes the field. Its icon swaps between pause bars and a play triangle; `aria-pressed` and `aria-label` follow. 6. While the tab is hidden the animation loop is cancelled; it resumes from the same phase when visible (no jump). 7. Rendering is capped at 60fps even on 120Hz displays. 8. With `prefers-reduced-motion: reduce` the field draws a single static frame and the button starts in the "Play background" state. Ripples still draw one static ring if clicked. 9. Nav links, sign-in and buttons have hover colour shifts (160ms) and 2px mint focus rings. ## Structure ``` 1280 × 800 (canvas: position fixed, inset 0, behind everything) ┌────────────────────────────────────────────────────────────────────────┐ │ nav 72 ~ Tidewater Product Docs Pricing Changelog Sign in [Book a demo] │ ├────────────────────────────────────────────────────────────────────────┤ │ hint text (⏸ 40px) top 98 │ │ [4.2] Adaptive autoscaling… pill 30px, top 96 padding │ │ · · · · · │ │ Infrastructure that 96px / .98 · · crest · · │ │ listens before it · · · · · · │ │ scales. · · · · · │ │ sub 18px, max 500px · · · · · │ │ [Start free →] [Read the 4.2 notes] │ ├──────────────┬──────────────┬──────────────┬───────────────────────────┤ │ P50 COLD START│ REGIONS │ UPTIME, 12 MO │ TEAMS ON TIDEWATER │ │ 38 ms │ 23 │ 99.995 % │ 4,100 + │ └──────────────┴──────────────┴──────────────┴───────────────────────────┘ side padding 64px; stats strip has a top hairline and a dark gradient backing ``` - `` fixed full-viewport, sized to `innerWidth × innerHeight × min(devicePixelRatio, 2)`. - `.page` is a flex column on top with `pointer-events:none`; only `a` and `button` re-enable pointer events, so clicks on empty space reach the window handler. - `