Slowly drifting topographic contour lines — a living elevation map drawn with marching squares.

Contour lines of an imaginary landscape, slowly rising and falling as the terrain beneath them evolves. Editorial, cartographic, and calm — drawn with marching squares on one Canvas. Drop it as the first child of a relative container.

Playground

Chart the unknown

Terrain that never stops shifting.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/topographic-drift.json"

Usage

tsx

import { TopographicDrift } from "@/components/godui/topographic-drift";

<div className="relative overflow-hidden">
  <TopographicDrift />
  <YourContent />
</div>

The layer is absolute inset-0 z-base; parent must be relative, content at z-raised+. Color defaults to --color-foreground (tracks light/dark). Caps DPR at 2, pauses off-screen and on hidden tabs, and renders a static map under prefers-reduced-motion.

Examples

Dense

More levels, finer terrain.

Props

Prop	Type	Default	Description
`lineCount`	`number`	`9`	Number of contour levels.
`speed`	`number`	`1`	Drift speed multiplier.
`color`	`string`	`--color-foreground`	Contour color.
`noiseScale`	`number`	`0.004`	Field scale — smaller is broader terrain.
`weight`	`number`	`1`	Contour line width (px).

Also accepts standard div attributes (e.g. className, style).

Topographic Drift