Skip to content

No.258 · Media

Dither Portrait

A picture printed in two inks by error diffusion; a lens follows the pointer and shows the full-colour original, its edge breaking into dots.

The prompt

Written for the variant you picked above: Ink on paper

Build an image component that prints a picture in exactly two inks and lets a lens reveal the original. Draw the source (an image URL, or by default a generated horizon study painted on canvas) cover-fitted into the frame; sample it at one cell per 2 CSS px, convert to luma with a slight gamma lift, and dither it: Floyd–Steinberg error diffusion by default (serpentine scan, 7/16 · 3/16 · 5/16 · 1/16), with Atkinson (six neighbours at 1/8 each, so highlights stay open) and an 8×8 Bayer ordered matrix as alternatives. Write the 0/1 mask into a small canvas in the ink and paper colours and draw it up with image smoothing off, so every cell stays a crisp square. A round lens (radius 110px, or 30% of the frame on small screens) follows the pointer on a 0.22 lerp and grows in on enter and shrinks away on leave. Inside it the full-colour original shows through; across a 52px feathered edge each cell shows colour only where the radial falloff beats that cell's Bayer threshold, so the boundary breaks into the same kind of dots instead of a hard circle. The edge mask is rebuilt only for the cells around the lens. A pill button in the corner cycles the dither pattern and re-prints the picture. Selected variant — Ink on paper: Ink #1b1a17 on paper #efe9dc, like a risograph print.

Notes

Interaction
Move over the picture to reveal colour under the lens; click the pill to switch between Floyd–Steinberg, Atkinson and Bayer.
Motion
Lens position lerp 0.22 and radius lerp 0.18; the loop stops once the lens settles.
Accessibility
The canvas has role="img" and a written description. The pattern button is a real button whose label names the current pattern. Reduced motion moves the lens directly.
Responsive
Re-prints at the new size on resize; the lens caps at 30% of the smaller side.
On touch
Tap or drag to place the lens; vertical swipes still scroll.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components