A procedural monochrome terrain study with winding contour lines, shaded ridges and a crisp focal band. Adjust motion, scale, contour density, line thickness, relief, distortion, focus, depth of field, exposure and palette. The live editor and standalone code exports use the same original WebGL renderer.
How this shader works
Topographic Flow draws fine silver contour lines over dark, shaded terrain. The lines wind around ridges and valleys like a map, and a depth of field effect keeps one band in sharp focus while the rest blurs softly. The terrain is generated in code and moves slowly. The Look section shapes the terrain and its lines, and the Colors section sets the terrain and contour colours.
Tips
- Contour density sets how many lines there are. Lower it for a clean, minimal map.
- Focus position moves the sharp band up or down, and Depth of field sets how strong the blur is.
- Terrain relief and Flow distortion control how hilly and twisted the terrain looks.
- Lower Speed / direction for a slower drift behind text.
Questions
How do I make an animated topographic map background?
Open Topographic Flow and set Contour density and Line thickness for the look you need. Pick your own Terrain colour and Contour colour, then export it as HTML, React or Svelte code.
Can I turn off the blur?
Lower Depth of field to reduce the blur so more of the terrain stays sharp.
Preview and customize in the browser. Exports require membership.