Vibeset

Contour lines

An invented terrain (fractal noise drifting very slowly) drawn only with its height lines: a thin one at every step of height and a thicker one every fifth, as on a hiking map. Under the pointer the terrain rises like a hill and the curves close in around it. What is hard to get right is the thickness: a curve is where the height equals an exact multiple of the step, and to make it the same width in pixels on gentle and steep slopes you have to measure how much the height changes from one pixel to the next, which is what fwidth normally does. It is not used here because in WebGL 1 it is an extension: the height is computed three times and the slope comes from the difference. The whole shader, noise included, is written here. Without WebGL a fixed gradient remains.

And the React Bits original: Topography

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Topography, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For the background of a data, mapping, travel or outdoors landing, where relief says something.

Watch out for

It has the most code of the ones we analyse here: 58 KB of source. Load it lazily and only where it shows.

Accessibility

It respects the system reduced-motion setting and recovers the WebGL context if the browser drops it. It is decorative.