What is going on up there
The photograph sits underneath, as a background-image. Over it, a
<canvas> paints a mosaic of opaque squares that hides it — so the
image shows through wherever a square is missing. The canvas never contains the
photograph, only what masks it.
Two things remove squares. The mosaic drops some of its own accord, from a draw with a fixed seed: the clearing to the centre right is therefore the same on every load and on every machine. Then the pointer wipes some away under a round brush, with a trail that closes up behind it.
The corner holding the title keeps all its squares. Its right and bottom edges are deliberately ragged, otherwise the area would read as a white rectangle stuck onto the photograph.
Tuning it
Everything goes through CSS variables, at the top of
reveal-mosaic-hero.css. One of them rescales the whole thing, mosaic
included : --ph-font-size, which is the body size of the link. The
others are overridden one at a time : --ph-cellule for the size of
the squares, --ph-rayon for the brush, --ph-trainee for the
duration of the trail, --ph-photo for the image.
Three settings are neither colours nor measurements nor durations, so they are set as
attributes : data-ph-densite (the proportion of squares kept),
data-ph-graine (changes the whole pattern) and
data-ph-lissage (how much inertia the brush follows the pointer with).
The hero at the top carries data-ph-reglable : the white dot becomes
a slider, reachable from the keyboard. Give it focus, then set the radius with the
arrow keys, Home and End. Without that attribute the dot stays
what it is in the original : a handle for the mouse, invisible to assistive
technology.