01 — Overview
The media stays real. Only the blocks are drawn.
The picture is an ordinary image element. The canvas above it carries nothing but blocks, blended against what sits underneath.
Survives export
Because the photo is a real element rather than something painted into the canvas, it is there in the editor, in an export, and while the effect is still loading.
Reads the light
Every cell samples the picture, auto-levels it against the frame, and sizes its block from the result.
Never blocks the picture
If a cross-origin source cannot be sampled, the blocks simply stay empty and the media shows through untouched.
02 — The mechanic
Tone drives block size.
Variation sets how much of the sampled tone reaches the block size. At zero every block is the same size and you get a flat mosaic; at one the size follows the light and you get a halftone.
Variation 0
Flat mosaic
Variation 0.5
Mixed
Variation 1
Halftone
03 — Coverage
Choose which part of the tone range gets blocks.
Coverage decides where the blocks cluster. Threshold moves that edge through the range and softness feathers it.
Full range
everywhere
Highlights
bright only
Midtones
middle only
Shadows
dark only
04 — Shapes
Eight block shapes.
Every shape is uniform fill, so an area of even brightness reads as an even field instead of banding into streaks.
Square
Rounded
Circle
Diamond
Ring
Cross
Triangle
Hexagon
05 — Presets
Seven starting points.
Each preset moves four things at once: coverage, cell size, colour source and blend. No two resolve to the same picture, and every value stays editable afterwards.
Mosaic
true pixelation
Ember
warm highlights
Ink
dark stipple
Grid
rings on midtones
Bloom
glowing dots
Lattice
faint crosses
Chroma
source diamonds
06 — Fit
Cover, contain or fill.
Fit decides how the picture sits in the frame, and the block grid follows it exactly. Sampling and the soft-focus layer share one fit calculation, so the blocks can never drift out of register with the photo underneath.
Cover
crops to fill
Contain
whole image, letterboxed
07 — Blur
The blocks keep what the blur hides.
Blur softens the media by padding the source rather than scaling it, so nothing zooms and no edge fringes. Sampling still reads the sharp original, so the blocks hold detail the picture underneath has already lost.
Blur 0
sharp
Blur 9
blocks unchanged
08 — Controls
A control panel on the artwork.
Any instance can show an in-canvas panel so a visitor can try the effect without opening the editor. Every knob in it exists as an editor property control too, and a preset never hides a control. The panel is deliberately hidden on the design canvas and in exports, so it appears in preview and on the published site.
visible in preview and when published
Pixel Filter
A Framer code component