Dither Background

Flowing two-color waves with ordered dithering, adjustable pixel size, and a static fallback.

Flowing two-color waves rendered through a 4×4 Bayer matrix for a crisp, pixelated texture. Move the pointer to repel the pixels, or click or tap to send an expanding ripple through the background. The pattern springs back when the pointer leaves.

Dither Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the dither-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/dither-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { DitherBackground } from "@/components/hangry-ui/shader/dither-background";

<DitherBackground
  color={[0.02, 0.86, 0.5]}
  backgroundColor={[0.02, 0.04, 0.035]}
  pixelSize={3}
  speed={0.4}
  className="grid place-items-center p-12"
>
  <h2 className="typography-section-title text-white">Make something different.</h2>
</DitherBackground>

Props

Prop	Type	Default	Description
`color`	`[number, number, number]`	`[0.02, 0.86, 0.5]`	Foreground RGB channels from 0 to 1.
`backgroundColor`	`[number, number, number]`	`[0.02, 0.04, 0.035]`	Background RGB channels from 0 to 1.
`pixelSize`	`number`	`3`	Pixel cell size in CSS pixels; minimum 1.
`speed`	`number`	`0.4`	Nonnegative wave speed; 0 renders a static frame.
`interactive`	`boolean`	`true`	Repel the grid around the pointer and send a ripple on click or tap. Set false to disable interaction. Reduced motion disables both effects.
`interactionRef`	`RefObject<HTMLElement \| null>`	—	Optional external hover target for masked compositions such as Dithered Logo.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Supports className, style, IDs, and accessibility attributes. The native color attribute is replaced by the RGB prop.

Dependencies

Motion
vgpu