Dither Shader: Retro Dithering Background for React

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add dither-shader.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Highlight colorcolorFront

Shadow colorcolorBack

Pixel sizepixelSize

Color stepslevels

Animation speedspeed

Pattern frequencyscale

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<DitherShader/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/dither-shader.en.json

Or, 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

Dither Shader