Dither Cloud Backdrop

ProNew

A drifting cloud made of chunky two-tone pixels, scattered with a random dither so its edges crackle as it moves.

The full demo as documented.

Customize

Controls declared by this item. Changes drive the preview live.

speed1


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-dither-cloud

Prop	Type	Default	Description
`colors`	`string[]`	`chart-1, chart-2, chart-3`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

Each pixel is on or off by comparing a cloud height to a fixed random threshold; the canvas is shown with hard pixel edges.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-dither-cloud

Prop	Type	Default	Description
`colors`	`string[]`	`chart-1, chart-2, chart-3`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

Each pixel is on or off by comparing a cloud height to a fixed random threshold; the canvas is shown with hard pixel edges.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.