Isoline Waves Background

Isoline is the lightest way to give a page a living background. A single full-screen plane runs a fragment shader that treats a drifting landscape of noise as a height map and draws its contour lines, thin and anti-aliased at every pixel density, with every fifth line brighter like the index lines on a printed map. A soft halo follows each line, a key light in the corner makes nearby contours burn brighter, the far field falls into fog, the bands between lines are tinted like terraced relief, and the cursor raises a gentle hill so the lines bend around it and relax when it stops. Four CSS custom properties set the whole palette, so a theme toggle or a palette button simply changes the variables and the colours crossfade. It is one draw call, uses fewer octaves and lines on small screens, pauses offscreen, draws a single still frame for reduced motion and falls back to a CSS contour poster without WebGL. A finished glass card holds the headline with an italic accent word, three feature points and a hairline gradient edge, beside a small stack of note cards that shows the product, and keeps contrast comfortably above AA. Drop it behind a hero, a sign-up block or a pricing teaser.