Topographic Contour Drift
A survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
- Category
- Backgrounds
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useEffect, useRef } from "react";
/**
* A drifting topographic map, traced with marching squares.
*
* The technique is not "draw some wavy lines" — it is a real iso-contour
* extraction over a scalar field, and the two things that make it look like a
* survey map rather than a screensaver are both correctness details:
* interpolated edge crossings, and disambiguated saddles.
*/
const CELL = 13;
const OCTAVES = 4;
/** Integer hash -> [0,1). Deterministic, so the field never boils. */
function hash(ix: number, iy: number, seed: number): number {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Most contour-line backgrounds are stacked wavy paths that only resemble a topographic map. This extracts genuine iso-contours from a scalar noise field with marching squares, and the difference shows up in the places lines meet. Two details carry it, and both are correctness rather than styling. The first is interpolating where each contour crosses a cell edge, at the fraction of the way along that the level sits between the two corner values — snapping instead to the nearest corner is what gives most marching-squares demos their staircase silhouette, and that interpolation is not an enhancement of the algorithm, it is the algorithm. The second is the saddle cases: two of the sixteen corner configurations are genuinely ambiguous, and resolving them arbitrarily makes contours cross one another, which no survey map has ever done. Averaging the four corner values tells you whether the high ground connects through the middle of the cell or is pinched off, and that decides the pair of segments to emit. The animation moves the sample window across a fixed field rather than regenerating noise, because uncorrelated frames read as boiling static instead of terrain sliding past, and the scalar field is computed once per frame and shared across every level. Every fifth contour is stroked heavier, which is the index-contour convention that makes it read as cartography.
Curator’s note
Cases 5 and 10 are the whole game. Resolve the saddles arbitrarily and the contours cross each other, which no map has ever done.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Flow Field Drift
backgroundsParticles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.
Reaction Diffusion Plate
backgroundsA live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
Concrete Wall Texture
backgroundsA seamless procedural concrete surface drawn once to canvas and blended over anything.