Dither Background
Dependency-free WebGL background with ordered Bayer dithering, pluggable wave, gradient, noise, and plasma shader fields, reduced-motion handling, and foreground content composition.
Shader models
Switch between wave, gradient, noise, and plasma fields.
Controls
Palette
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Foreground DOM content rendered above the canvas. |
| model | 'wave' | 'gradient' | 'noise' | 'plasma' | 'wave' | Background shader field used before the dither pass. |
| colors | string[] | ['#071a12', '#34d399'] | Two to four hex, RGB, or resolvable CSS colours used by the field palette. |
| gradientAngle | number | 135 | Linear gradient angle in degrees for the gradient model and fallback CSS background. |
| pixelSize | number | 4 | Size of each dither cell in CSS pixels. |
| speed | number | 0.7 | Procedural motion speed multiplier. |
| intensity | number | 1 | Final shader colour intensity. |
| interactive | boolean | true | Whether pointer position influences the blend. |