Lexicon / Image
What a picture can do · 7 named effects, each running below
A small blurred stand-in appears at once and the real picture fades in over it — in a box that was already the right size, so nothing jumps.
also called low-quality image placeholder · progressive loading
Two jobs at once: something to look at immediately, and a reserved box so nothing shifts when the real file lands. Layout shift is a ranked Core Web Vital, so the aspect-ratio is not decoration.
figure { aspect-ratio: 3 / 2 } /* the box is reserved before the file lands */
.placeholder { filter: blur(18px); transform: scale(1.1) }
.full { opacity: 0; transition: opacity .9s } /* → 1 once loaded */A still photograph is given a slow drift and a slow push in — just enough to feel like time passing.
also called slow pan and zoom · documentary pan
Named for the documentarian who made a career of it. The rule is that the move must be slower than the viewer's attention — if they notice the motion starting, it is too fast.
@keyframes kb { to { transform: scale(1.14) translate(-2%, 1.5%) } }
animation: kb 18s ease-in-out infinite alternate;Any photograph, whatever it arrived wearing, comes out in one colour. Drag back to see what it came in as.
also called two-tone mapping · bichromate
A brand-colour treatment that survives any source image. Grayscale the base, then lay a single hue over it with mix-blend-mode.
background: var(--accent);
mix-blend-mode: color; /* over a grayscale base */The picture softens towards the bottom, so the caption sits on something readable without a black bar laid across it.
also called gradient blur · layered blur · tapered blur
Stacked layers, each blurring more than the last, each masked to a different band. Far more elegant than a scrim because the image stays legible while the text still reads.
backdrop-filter: blur(Npx);
mask-image: linear-gradient(to top, #000, transparent);Text sits on light
The picture is cut down to a handful of tones, and the ones that are missing are made up out of a regular grain. Drag to take more away.
also called Bayer dithering · halftone · posterize
Real pixel work — it needs crossorigin="anonymous" and a CORS-clean host, otherwise the canvas is tainted and getImageData throws. Wikimedia sends the header; most museum CDNs do not.
const BAYER8 = [...]; // 8×8 threshold matrix
v = v + (BAYER8[y%8][x%8]/64 - 0.5) * spread;The picture is uncovered by an edge travelling across it, not by fading up underneath.
also called mask reveal · wipe · shape reveal
A wipe has a direction and an edge; a fade has neither. That edge is what makes the reveal feel authored rather than merely delayed.
clip-path: inset(0 100% 0 0) → inset(0 0 0 0);
transition: clip-path .9s cubic-bezier(.16,.84,.24,1);Two versions of the same frame, one laid over the other. Drag the divider across to compare them.
also called before/after · juxtapose
One image clipped over another, the clip driven by pointer position. Keep both layers exactly registered or the comparison lies.
clip-path: inset(0 calc(100% - var(--x)) 0 0);