Image / media · 5.8

Threshold-map wipe

Frost melting off a window from the inside out.

A reveal that resolves in organic patterns, because a greyscale texture decides the order.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it actually works

Arguably the best cost/impact ratio in the whole index. It is one comparison per pixel. It is trivial. And it is the only entry in this category with a genuine non-WebGL fallback, because mask-image with a gradient does the same job in CSS.

A post-process shader takes a black-and-white texture as a per-pixel threshold map: its red channel is that pixel's threshold. A uProgress uniform runs 0 to 1 and is compared per fragment. Where progress exceeds the pixel's threshold, that fragment reveals. Dark areas reveal first, bright last. So the transition's entire personality is authored by swapping the texture.

The knobs, named

The threshold map is the whole personality. uProgress is the playhead. Edge softness is the trim.

Knob	Source	What it teaches
Threshold map	sourced	The whole personality. linear wipe is included on purpose: it is what this technique replaces, and the comparison is the lesson.
uProgress	sourced	The playhead. One slider that shows the entire mechanism: drag it and you are the transition.
Edge softness	sourced	The width of the comparison band. At 0 it is a hard binary edge; wide and it is a dissolve.
Auto-play	ours	Loop uProgress instead of holding it. Off by default, because the slider is the point.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (author)

Codrops "The Sleepers" (2026). The red-channel-as-threshold mechanism, the uProgress uniform, and the dark-reveals-first ordering are the article's own. The perf claim is a direct quote: "Lightweight: single texture lookup and basic math operations per fragment."

Seen on: Codrops "The Sleepers".
Dependencies: any shader context; vanilla-possible
Difficulty: trivial: the highest aesthetic-return-per-line entry in the index
Performance: Quoting the source: "Lightweight: single texture lookup and basic math operations per fragment."
Accessibility and the floor: With auto-play off, which is the default, there is no motion at all. Under reduced motion auto-play is forced off and the slider still works.

Where our build departs from the source: Our five maps are generated procedurally in the shader rather than loaded as textures, for the same no-external-assets reason as 5.1. The mechanism is identical; the authoring story is not.

Notes

Composability. Same family as the displacement map (5.1): a greyscale texture deciding per-pixel behaviour. The index treats them as separate entries because one warps and one gates, but the authoring philosophy is identical.

The CSS analogue for non-WebGL contexts is mask-image with a gradient or noise mask, and one source shows GSAP driving both in a single motion system. That means this feature has a real fallback rather than a blank rectangle, which almost nothing else in this category can say.

Error-diffusion dithering

Seamless infinite marquee