A canvas hero with a real image underneath

A canvas hero with a real image underneath, so a broken canvas still shows.

67 / Performance

Sampleton Surveyors · Est. 1987

Every slope, measured before you build on it.

Topographic and measured building surveys across the county.

Book a site survey

Canvas drawing. The SVG underneath is hidden behind it.

LCP here is the headline text. A canvas is never an LCP candidate, so its paint is invisible to that metric however long it takes.

Remake it

Build one interactive web page: Generative contour lines on a canvas, with the same contours as an image beneath. Break the canvas and see what survives.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Any hero drawn in canvas or WebGL. Do not let it fail the way this kind of piece usually does: No image underneath: a failed canvas leaves an empty page, and LCP never notices.

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: Any hero drawn in canvas or WebGL.
When it does not: A hero that does not need a canvas at all, which is most of them.
How it fails: No image underneath: a failed canvas leaves an empty page, and LCP never notices.

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