frontrequired
The image on top - the one that gets eaten away. Its natural size sets the aspect ratio unless you pass aspect yourself.
Paint one image out of another
Move the cursor across it
the web in19970% of the modern screen uncovered
Two image paths and you are done
revealed is a WebGL image reveal for React and plain JavaScript. It stacks two pictures, cuts a noise-carved hole through the top one, and lets the pointer - or scroll, or your own state - paint that hole open. Install it with npm i revealed; nothing else comes with it.
The plate above is this and nothing else - two image paths, a skeleton, a named edge. It injects its own canvas, takes its aspect ratio from the front image, pauses when it scrolls out of view, and falls back to the plain front image when WebGL is missing or the visitor asked for reduced motion. The year beside it is one more prop: onReveal, which hands you the fraction currently uncovered about ten times a second.
import { Revealed } from "revealed/react";
export default function Hero() {
return (
<Revealed
front="/demo/front.webp"
back="/demo/back.webp"
skeleton="/demo/back-skeleton.svg"
edge="liquid"
/>
);
}Three plates, stacked
The effect is a mask between two images - a dissolve carved out of animated noise, not a cross-fade. The third plate is optional and exists purely so the visitor can tell there is something underneath.
backrequired
The image underneath - the one being revealed. Same framing as the front plate is what makes the reveal read as one object changing.
skeletonoptional
Line art of the back plate, ghosted onto the front and sketched on in a loop - then wiped away exactly where the back plate is already visible.
Six edges out of the box
edge takes a preset name or an object of the same fields. Every plate below is live - paint on any of them. plain is the one to reach for if you want the quieter, pre-wave boundary back.
liquid
wet, torn, travellingthe defaults
plain
the library before the wavecarve 0.62 · refraction 0.012 · bubble 0 · facet 0
dissolve
fine grain, crumblingscale 22 · carve 0.5 · detail 0.4 · feather 0.008 · bubble 0.8 · bubbleScale 4
ink
slow, heavy blotscale 4 · carve 0.8 · detail 0.15 · speed 0.4 · refraction 0.02
shatter
sharp angular tearsscale 12 · carve 1.1 · detail 0.05 · feather 0.004 · refraction 0 · bubble 0.3 · facet 1
clean
no noise, soft circlecarve 0 · detail 0 · feather 0.02 · refraction 0 · bubble 0 · facet 0
Three pairs, three ideas
The library has no opinion about what is in the two plates - only that they share a frame. What the reveal means is entirely the pictures you choose. All three below are live.
A screen, 28 years apart
A 1997 travel site on a beige CRT over the 2025 version of the same page on a flat panel. This is the pair with a skeleton: line art of the modern monitor is ghosted onto the CRT and sketched on in a loop, so a visitor who has not moved the cursor yet can still see there is a second screen in there to find.
A pigeon and its X-ray
The same bird twice, photograph over radiograph, in one pose. There is no skeleton plate here and there does not need to be - the X-ray is the structure underneath, which is true of any pair whose back plate already explains itself. The dissolve edge is the finest-grained of the six, so the feathers go to bone as grain rather than as a hole.
A tree losing its leaves
Summer over winter, registered limb for limb, so the canopy comes away and the branches it was hanging on are already exactly where they should be. Flick the cursor once and let go: the wave keeps carrying the tear across the leaves for about a second after the pointer has stopped.
The pointer is only the default driver
Anything that can produce a number between 0 and 1 can drive the mask instead - a section’s scroll progress, a slider, a timer, a click on a button of your own.
Read it, then take it apart.
WebGLZero dependenciesReact & plain JSMIT
Other libraries
topolines
The contour lines moving behind this page are drawn by topolines - the same author’s canvas library for animated topographic fields. One instance sits under the whole site; nothing else on the page draws them.