PixelResolve

Options

coarse 64

4 to 256 px, good: 32 to 128

The biggest a block gets, in CSS pixels. This is where the picture starts, and it decides whether the opening frame is a recognisable subject or an abstract. At 64 a face is still a face; at 160 it is four rectangles.

steps 5

1 to 8, good: 4 to 6

How many halvings between the coarsest block and full resolution. Each one is a rung of the ladder the arrival crossfades along, so more rungs is a smoother arrival over the same time, not a longer one.

duration 2.6

0.2 to 20 s, good: 1.5 to 4

Seconds for the picture to arrive. Slow enough that each rung of the ladder is visible is the whole point; under about a second it reads as a glitch rather than as something loading.

hold 0.25

0 to 5 s

Seconds of blocks before it starts. A short one matters more than it sounds: it lets the first frame register as a deliberate state rather than as the start of a transition that was already running.

scatter 0.55

0 to 2, good: 0.3 to 0.9

How much the blocks disagree about when their turn is. At 0 the whole picture sharpens at once, which reads as a lens being focused rather than as data landing. The patchiness is the effect.

taps 3

1 to 4, good: 2 to 4

Samples across a block, squared, so 3 is nine samples. At 1 it is a point sample: thin bright things vanish at large block sizes and pop back at small ones, and the picture flickers instead of resolving. This is also the performance control.

levels 6

2 to 64, good: 4 to 12

How few colours the early blocks are allowed, climbing back to all of them by the end. A picture arriving over a slow line lost its palette as well as its resolution; without this the big blocks are a smooth gradient, which no slow format ever produced.

ink #0d0d12

css colour

What a block that has not arrived yet is. Near-black rather than black, so the empty blocks read as a surface waiting rather than as holes in the page.

maxDpr 2

1 to 3

Device pixel ratio ceiling. The blocks are measured in CSS pixels, so this changes how crisply a block's edges land rather than how big the blocks are.

reducedMotionTime 9

0 to 60 s

The single frame shown when the user prefers reduced motion. For a one-shot arrival this has to be a time after it has finished, so the picture is simply there. The picture is the point; the arriving is how it gets in.

What it needs

Category

Reveals, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1.4 ms · 1 context

Pinned to

v0.13.0

• The obvious version quantises the coordinate, samples once per block and steps the block size down over time. It has two faults you can see immediately
• It jumps. A block has to be a whole number of pixels or the blocks come out uneven, so stepping the size gives four or five visible lurches with nothing in between. Crossfading between two rungs of the ladder is what turns the steps into an arrival
• It point samples. One pixel out of a block is not the block: anything thinner than a block vanishes at large sizes and pops back at small ones, which reads as the picture flickering rather than resolving. Averaging across the block is what a mipmap does and it is what keeps a subject legible at eight pixels across
• The blocks do not arrive together. Each has its own moment, hashed from the block rather than taken from its position, so the picture lands in patches. One that sharpens evenly reads as a lens being focused; one that arrives in patches reads as data
• Fewer colours while the blocks are big. A picture arriving over a slow line lost its palette as well as its resolution, and without that the big blocks are a smooth gradient, which no slow format ever produced
• The block ladder is in CSS pixels rather than device pixels, so the picture is the same picture on any display. A block measured in device pixels is half the size on a retina screen, which is the opposite of what a block is for
• One shot: it resolves and stays resolved. t past the end is the end and nothing is stored between frames
• The <img> stays in the document, hidden. Its alt text is the accessible version of the picture and a page whose script never runs still shows the photograph
• The average is the cost: at the default three taps it is nine samples per block size and two block sizes are in flight, so eighteen samples a pixel while it is arriving
• It is a one shot, so that cost is paid for a couple of seconds and then the frame stops changing. The runtime stops the loop when the element leaves the screen
• `taps` is the control if a page feels heavy. Dropping from 3 to 2 halves the samples; dropping to 1 is a point sample and brings back the flicker the average exists to stop