Topography

A living contour map with glowing, elevation-tinted lines.

Default

Colors, bands and the cursor elevation are wired to the controls underneath. The contours are drawn in a WebGL 2 fragment shader.

Demo Content

FeaturesAbout Sign up

New Creative Components

A living topographic contour map.

Get started Learn more

Customize

Low Color

Mid Color

High Color

Speed0.35

Morph Amount3

Morph Speed0.05

Bands2

Thickness0.01

Scale2

Pixel Size1

Glow0.5

Color Mode

Contrast3

Brightness1

Fill BandsGrain

Grain Intensity0.05

Opacity1

Cursor Elevation

Cursor Radius0.3

Cursor Strength0.4

API Reference

Topography

Prop	Type	Default	Description
`lowColor`	`string`	`'#5227FF'`	Color used for the lowest elevation bands.
`midColor`	`string`	`'#FF9FFC'`	Color used for the mid elevation bands.
`highColor`	`string`	`'#FFFFFF'`	Color used for the highest ridge lines.
`speed`	`number`	`0.35`	Animation speed of the morphing elevation field.
`morphAmount`	`number`	`3.0`	Amplitude of the field morphing (how much the terrain shifts).
`morphSpeed`	`number`	`0.05`	How differently each control point animates over time.
`bands`	`number`	`2.0`	Contour line density (number of elevation bands).
`thickness`	`number`	`0.01`	Thickness of the contour lines.
`scale`	`number`	`1.0`	Zoom level of the topographic field.
`pixelSize`	`number`	`1.0`	Retro pixelation step (1 = smooth, higher = chunkier).
`glow`	`number`	`0.5`	Soft bloom radius around the contour lines.
`colorMode`	`string`	`'elevation'`	Line coloring mode: 'elevation', 'uniform', or 'alternating'.
`contrast`	`number`	`3.0`	Contrast of the line coverage (sharpens or softens lines).
`brightness`	`number`	`1.0`	Overall brightness of the contour lines.
`fillBands`	`boolean`	`false`	Softly tint the areas between contour lines by elevation.
`opacity`	`number`	`1.0`	Overall opacity of the effect.
`grain`	`boolean`	`true`	Whisper-subtle animated film grain over the effect.
`grainIntensity`	`number`	`0.05`	Amplitude of the grain overlay. 0 disables it entirely.
`mouseInteraction`	`boolean`	`true`	Lift the elevation field gently around the cursor.
`mouseRadius`	`number`	`0.3`	Radius of the cursor elevation bump.
`mouseStrength`	`number`	`0.4`	Strength of the cursor elevation bump.
`lightMode`	`boolean`	`false`	Renders the contours over a white background instead of a transparent one.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Place it behind content with enough contrast.

Threads Waves