Contour lines that bend around the cursor

Map contours that bend round the cursor, with a hill that rises where it rests.

06 / WebGL

Sampleton Fell Club · Est. 1974

Every hill in the county, run in all weathers.

Tuesday and Thursday evening runs, a winter series and a summer relay. Bring a headtorch.

Remake it

Build one interactive web page: A topographic field in a fragment shader: simplex-noise terrain, index contours every fifth line, and a hill that rises under the pointer.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Outdoor, survey, geography, anything where land is the subject. Do not let it fail the way this kind of piece usually does: Copy over busy lines. Here the copy sits in the low corner with a soft shadow, and the drawn background stands in if WebGL fails.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: Outdoor, survey, geography, anything where land is the subject.
When it does not: Text-heavy pages: moving lines behind body copy cost legibility.
How it fails: Copy over busy lines. Here the copy sits in the low corner with a soft shadow, and the drawn background stands in if WebGL fails.

Measured on: landonorris.com · T11. Built from scratch for an invented business; nothing here comes from the site studied.