Surfaces / effect

Dither Veil

An interactive image veil with five complete dither families, trails and a keyboard reveal.

Open in studio ↗

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

Preserves Bayer, blue noise, line processing and complete Atkinson and Floyd–Steinberg diffusion kernels, reveal trails, rim and click bursts.
Original local studio sculpture media is bundled. The primitive has no implicit image URL: supply src and meaningful alt text, or use Demo for the complete media scene.
Arrows position the reveal, Enter or Space reveals, and Escape restores the veil. Reduced motion settles the image and gives an immediate reveal.
DPR is capped at 1.5; diffusion deliberately caps its grid at 512×512 and enlarges cells when necessary. Stale image loads are ignored; readable image/GPU failure and retry remain.

React 19.2Modern browsersWebGL

React Bits — David Haz · MIT + Commons Clause. Reuse explicitly authorized; see bundled exact notice.

Props

Prop	Type	Default	Description
`src`	string	`undefined`	Caller-owned image source. The primitive requests no image when omitted; Demo and gallery controls supply the bundled local artwork.
`alt`	string	`"Image with an interactive dither veil"`	Meaningful image description; Demo and gallery controls describe the bundled artwork.
`pattern`	'bayer' \| 'noise' \| 'atkinson' \| 'floyd' \| 'lines'	`"floyd"`	Pattern; accepted ranges and choices are shown in the controls.
`fit`	'contain' \| 'cover'	`"contain"`	Image fitting; accepted ranges and choices are shown in the controls.
`palette`	'duotone' \| 'rgb'	`"duotone"`	Palette; accepted ranges and choices are shown in the controls.
`inkColor`	string	`"#120f17"`	Ink; accepted ranges and choices are shown in the controls.
`paperColor`	string	`"#f4f1ea"`	Paper; accepted ranges and choices are shown in the controls.
`pixelSize`	number	`2`	Pixel size; accepted ranges and choices are shown in the controls.
`levels`	number	`2`	Levels; accepted ranges and choices are shown in the controls.
`contrast`	number	`1.15`	Contrast; accepted ranges and choices are shown in the controls.
`brightness`	number	`0`	Brightness; accepted ranges and choices are shown in the controls.
`revealRadius`	number	`200`	Reveal radius; accepted ranges and choices are shown in the controls.
`softness`	number	`0.6`	Softness; accepted ranges and choices are shown in the controls.
`linger`	number	`1`	Trail linger; accepted ranges and choices are shown in the controls.
`rim`	number	`0`	Rim intensity; accepted ranges and choices are shown in the controls.
`rimColor`	string	`"#a78bfa"`	Rim color; accepted ranges and choices are shown in the controls.
`reverse`	boolean	`false`	Reverse reveal; accepted ranges and choices are shown in the controls.
`wander`	boolean	`false`	Automatic reveal; accepted ranges and choices are shown in the controls.
`clickBurst`	boolean	`true`	Click bursts; accepted ranges and choices are shown in the controls.
`paused`	boolean	`false`	Stops decorative motion while preserving useful content and interaction.
`replayToken`	number	`0`	Change to restart decorative phase without remounting content; static prints and agent activity retain their state.
`className`	string	`''`	Additional scoped host class.
`style`	CSSProperties	`undefined`	Inline host styles; caller owns container layout.