Contour Field

Using it

Give it a box

The canvas fills its parent. Put it in a positioned container with a size, or pass classes such as absolute inset-0 to stretch it behind your content.

Keep it behind the content

The canvas is decorative and hidden from screen readers. Place your content after it in a relative container so text stays on top and selectable.

It looks after itself

Rendering starts when the canvas scrolls into view and stops when it leaves or the tab is hidden. Visitors who prefer reduced motion get one still frame.

Pointer reactive

This shader follows the pointer across the whole window, so it still reacts when content sits on top of it. Nothing to wire up.

Props

Props of the ContourField React component. The JavaScript version takes the same names in its settings object.

colors

[string, string, string], default ["#0c0f14", "#2f3946", "#d9a85a"]

Background, Lines, Index lines. Hex colours.

speed

number, default 1

Speed. Range 0 to 3.

scale

number, default 1.6

How much terrain is in view. Higher shows more, smaller features. Range 0.8 to 6.

intensity

number, default 1

Line thickness in pixels. Range 0.4 to 3.

seed

number, default 31

Seed. Range 0 to 999.

levels

number, default 18

Number of contour levels across the height range. Range 6 to 48.

paused

boolean, default false

Freeze the animation on the current frame.

maxDpr

number, default 2

Upper bound for devicePixelRatio. Lower it to save GPU time.

className

string

Classes for the canvas, for example to position it.

style

CSSProperties

Inline styles for the canvas.

Performance

Moderate. Cost 2 of 3.

Layered noise per pixel. Fine full-screen on recent phones and laptops; on weak GPUs the resolution steps down automatically.

Related shaders

• Lodestone

  Code
• Flint Glass

  Code
• Fog Veil

  Code