Dither Shader
An animated background in the retro aesthetic of ordered dithering noise.
Bayer-matrix ordered dithering quantizes a flowing plasma field into coarse-grained color steps, recreating the dithered noise texture of retro displays. Everything is drawn on canvas 2D, with no WebGL dependency.
Loading preview…
npx shadcn@latest add https://webberui.com/r/dither-shader.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
3
4
1
1
<DitherShader />
Installation
npx shadcn@latest add https://webberui.com/r/dither-shader.jsonOr, once registries are configured in components.json, install it as @webberui/dither-shader.
Usage
import { DitherShader } from "@/components/ui/dither-shader";
<DitherShader interactive className="h-[320px] w-full rounded-xl">
<div className="grid h-full place-items-center text-white">Retro</div>
</DitherShader>Setting levels to 2 gives you the classic pure two-tone dither; raise pixelSize to make the pixels chunkier.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colorBack | string | "#0b1220" | Shadow color (the pattern's low points) |
colorFront | string | "#38bdf8" | Highlight color (the pattern's high points) |
pixelSize | number | 3 | On-screen size of each dither pixel (px) — larger is chunkier |
levels | number | 4 | Number of quantized color steps; 2 is a pure two-tone dither |
speed | number | 1 | Animation speed multiplier |
scale | number | 1 | Pattern frequency — higher makes the ripples denser |
interactive | boolean | false | A bright ring surfaces near the pointer (mouse only) |
className | string | — | Forwarded to the container, for setting size and layout |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a single static frame is drawn and the animation loop never starts
- The canvas is a purely decorative layer marked
aria-hidden, so foreground content is announced as usual