Animated brand visuals: procedural fields quantized with an ordered dither and a duotone ramp.
preset="waves"Swirling smoke-like waves. Ambient backgrounds behind copy.
preset="pulse"Concentric rings pulsing outward. Emphasis behind a focal element.
preset="orb"A glowing orb with a shimmering surface. Foreground showcase visual.
preset="beams"Noisy light rays radiating from a point. Godrays-style backdrops.
preset="ripples"Interfering wavefronts from several sources. Texture panels.
preset="glow"Soft breathing halo. Dithered stand-in for a blurred gradient glow.
The duotone ramp takes any pair of colors, and the background can be transparent.
Orange#E8792F
Soft orange#FDBA74
Cyan#22d3ee
Soft cyan#67e8f9
Usage
Drop DitherShaderbehind content as an absolute layer, or use it standalone as a foreground visual. Presets and the full config reference live in src/lib/dither/ditherShader.ts.
<DitherShader preset="waves" class="absolute inset-0" />
<DitherShader preset="orb" colors={["#151515", "#67e8f9"]} mouse={0.2} />- Rendering pauses offscreen and respects reduced-motion preferences.
- Without WebGL2 the canvas stays transparent, so always treat it as decorative.
- Set
mouseabove 0 to let the field follow the pointer.