React Dither Background

React dithered background with Three.js rendering. Features wave patterns, Bayer matrix dithering, and retro pixelated aesthetics.

React

Three.js

React Three Fiber

postprocessing

Building retro pixel art effects?

Join our Discord community for help from other developers working with Three.js rendering and dithering algorithms.

Ever wanted to recreate that nostalgic pixel art aesthetic you see in retro games, 8-bit graphics, or vintage computer displays? Those distinctive dithered patterns that use limited color palettes to create the illusion of complex gradients and textures? The way noise patterns blend with mathematical precision to simulate more colors than are actually available, creating that unmistakable retro computing charm? Most dithering effects use simple CSS filters or basic image processing, but they lack the sophisticated algorithms that create truly authentic pixel art visuals.

This React component creates that captivating dithered background using Three.js with post-processing effects, featuring procedural wave generation, Bayer matrix dithering algorithms, and authentic pixel art color quantization that brings vintage gaming aesthetics to your interface.

Dynamic dithered waves with authentic pixel art processing

Watch procedural wave patterns transform through mathematical dithering and color quantization:

Loading component...

// @ts-nocheck'use client';import { useRef, useState, useEffect, forwardRef } from "react";import { Canvas, useFrame, useThree, ThreeEvent } from "@react-three/fiber";import { EffectComposer, wrapEffect } from "@react-three/postprocessing";import { Effect } from "postprocessing";import * as THREE from "three";import { cn } from '@/lib/utils';const waveVertexShader = `precision highp float;varying vec2 vUv;void main() {  vUv = uv;  vec4 modelPosition = modelMatrix * vec4(position, 1.0);  vec4 viewPosition = viewMatrix * modelPosition;  gl_Position = projectionMatrix * viewPosition;}`;const waveFragmentShader = `precision highp float;uniform vec2 resolution;uniform float time;uniform float waveSpeed;uniform float waveFrequency;uniform float waveAmplitude;uniform vec3 waveColor;uniform vec2 mousePos;uniform int enableMouseInteraction;uniform float mouseRadius;vec4 mod289(vec4 x) { return x - floor(x * (1.0/289.0)) * 289.0; }vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }vec2 fade(vec2 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }float cnoise(vec2 P) {  vec4 Pi = floor(P.xyxy) + vec4(0.0,0.0,1.0,1.0);  vec4 Pf = fract(P.xyxy) - vec4(0.0,0.0,1.0,1.0);  Pi = mod289(Pi);  vec4 ix = Pi.xzxz;  vec4 iy = Pi.yyww;  vec4 fx = Pf.xzxz;  vec4 fy = Pf.yyww;  vec4 i = permute(permute(ix) + iy);  vec4 gx = fract(i * (1.0/41.0)) * 2.0 - 1.0;  vec4 gy = abs(gx) - 0.5;  vec4 tx = floor(gx + 0.5);  gx = gx - tx;  vec2 g00 = vec2(gx.x, gy.x);  vec2 g10 = vec2(gx.y, gy.y);  vec2 g01 = vec2(gx.z, gy.z);  vec2 g11 = vec2(gx.w, gy.w);  vec4 norm = taylorInvSqrt(vec4(dot(g00,g00), dot(g01,g01), dot(g10,g10), dot(g11,g11)));  g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w;  float n00 = dot(g00, vec2(fx.x, fy.x));  float n10 = dot(g10, vec2(fx.y, fy.y));  float n01 = dot(g01, vec2(fx.z, fy.z));  float n11 = dot(g11, vec2(fx.w, fy.w));  vec2 fade_xy = fade(Pf.xy);  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);  return 2.3 * mix(n_x.x, n_x.y, fade_xy.y);}const int OCTAVES = 4;float fbm(vec2 p) {  float value = 0.0;  float amp = 1.0;  float freq = waveFrequency;  for (int i = 0; i < OCTAVES; i++) {    value += amp * abs(cnoise(p));    p *= freq;    amp *= waveAmplitude;  }  return value;}float pattern(vec2 p) {  vec2 p2 = p - time * waveSpeed;  return fbm(p + fbm(p2)); }void main() {  vec2 uv = gl_FragCoord.xy / resolution.xy;  uv -= 0.5;  uv.x *= resolution.x / resolution.y;  float f = pattern(uv);  if (enableMouseInteraction == 1) {    vec2 mouseNDC = (mousePos / resolution - 0.5) * vec2(1.0, -1.0);    mouseNDC.x *= resolution.x / resolution.y;    float dist = length(uv - mouseNDC);    float effect = 1.0 - smoothstep(0.0, mouseRadius, dist);    f -= 0.5 * effect;  }  vec3 col = mix(vec3(0.0), waveColor, f);  gl_FragColor = vec4(col, 1.0);}`;const ditherFragmentShader = `precision highp float;uniform float colorNum;uniform float pixelSize;const float bayerMatrix8x8[64] = float[64](  0.0/64.0, 48.0/64.0, 12.0/64.0, 60.0/64.0,  3.0/64.0, 51.0/64.0, 15.0/64.0, 63.0/64.0,  32.0/64.0,16.0/64.0, 44.0/64.0, 28.0/64.0, 35.0/64.0,19.0/64.0, 47.0/64.0, 31.0/64.0,  8.0/64.0, 56.0/64.0,  4.0/64.0, 52.0/64.0, 11.0/64.0,59.0/64.0,  7.0/64.0, 55.0/64.0,  40.0/64.0,24.0/64.0, 36.0/64.0, 20.0/64.0, 43.0/64.0,27.0/64.0, 39.0/64.0, 23.0/64.0,  2.0/64.0, 50.0/64.0, 14.0/64.0, 62.0/64.0,  1.0/64.0,49.0/64.0, 13.0/64.0, 61.0/64.0,  34.0/64.0,18.0/64.0, 46.0/64.0, 30.0/64.0, 33.0/64.0,17.0/64.0, 45.0/64.0, 29.0/64.0,  10.0/64.0,58.0/64.0,  6.0/64.0, 54.0/64.0,  9.0/64.0,57.0/64.0,  5.0/64.0, 53.0/64.0,  42.0/64.0,26.0/64.0, 38.0/64.0, 22.0/64.0, 41.0/64.0,25.0/64.0, 37.0/64.0, 21.0/64.0);vec3 dither(vec2 uv, vec3 color) {  vec2 scaledCoord = floor(uv * resolution / pixelSize);  int x = int(mod(scaledCoord.x, 8.0));  int y = int(mod(scaledCoord.y, 8.0));  float threshold = bayerMatrix8x8[y * 8 + x] - 0.25;  float step = 1.0 / (colorNum - 1.0);  color += threshold * step;  float bias = 0.2;  color = clamp(color - bias, 0.0, 1.0);  return floor(color * (colorNum - 1.0) + 0.5) / (colorNum - 1.0);}void mainImage(in vec4 inputColor, in vec2 uv, out vec4 outputColor) {  vec2 normalizedPixelSize = pixelSize / resolution;  vec2 uvPixel = normalizedPixelSize * floor(uv / normalizedPixelSize);  vec4 color = texture2D(inputBuffer, uvPixel);  color.rgb = dither(uv, color.rgb);  outputColor = color;}`;class RetroEffectImpl extends Effect {  public uniforms: Map<string, THREE.Uniform<any>>;  constructor() {    const uniforms = new Map<string, THREE.Uniform<any>>([      ["colorNum", new THREE.Uniform(4.0)],      ["pixelSize", new THREE.Uniform(2.0)],    ]);    super("RetroEffect", ditherFragmentShader, { uniforms });    this.uniforms = uniforms;  }  set colorNum(value: number) {    this.uniforms.get("colorNum")!.value = value;  }  get colorNum(): number {    return this.uniforms.get("colorNum")!.value;  }  set pixelSize(value: number) {    this.uniforms.get("pixelSize")!.value = value;  }  get pixelSize(): number {    return this.uniforms.get("pixelSize")!.value;  }}const RetroEffect = forwardRef<  RetroEffectImpl,  { colorNum: number; pixelSize: number }>((props: { colorNum: number; pixelSize: number }, ref: React.Ref<RetroEffectImpl>) => {  const { colorNum, pixelSize } = props;  const WrappedRetroEffect = wrapEffect(RetroEffectImpl);  return (    <WrappedRetroEffect ref={ref} colorNum={colorNum} pixelSize={pixelSize} />  );});RetroEffect.displayName = "RetroEffect";interface WaveUniforms {  [key: string]: THREE.Uniform<any>;  time: THREE.Uniform<number>;  resolution: THREE.Uniform<THREE.Vector2>;  waveSpeed: THREE.Uniform<number>;  waveFrequency: THREE.Uniform<number>;  waveAmplitude: THREE.Uniform<number>;  waveColor: THREE.Uniform<THREE.Color>;  mousePos: THREE.Uniform<THREE.Vector2>;  enableMouseInteraction: THREE.Uniform<number>;  mouseRadius: THREE.Uniform<number>;}interface DitheredWavesProps {  waveSpeed: number;  waveFrequency: number;  waveAmplitude: number;  waveColor: [number, number, number];  colorNum: number;  pixelSize: number;  disableAnimation: boolean;  enableMouseInteraction: boolean;  mouseRadius: number;}function DitheredWaves({  waveSpeed,  waveFrequency,  waveAmplitude,  waveColor,  colorNum,  pixelSize,  disableAnimation,  enableMouseInteraction,  mouseRadius,}: DitheredWavesProps) {  const mesh = useRef<THREE.Mesh>(null);  const mouseRef = useRef(new THREE.Vector2());  const { viewport, size, gl } = useThree();  const waveUniformsRef = useRef<WaveUniforms>({    time: new THREE.Uniform(0),    resolution: new THREE.Uniform(new THREE.Vector2(0, 0)),    waveSpeed: new THREE.Uniform(waveSpeed),    waveFrequency: new THREE.Uniform(waveFrequency),    waveAmplitude: new THREE.Uniform(waveAmplitude),    waveColor: new THREE.Uniform(new THREE.Color(...waveColor)),    mousePos: new THREE.Uniform(new THREE.Vector2(0, 0)),    enableMouseInteraction: new THREE.Uniform(enableMouseInteraction ? 1 : 0),    mouseRadius: new THREE.Uniform(mouseRadius),  });  useEffect(() => {    const dpr = gl.getPixelRatio();    const newWidth = Math.floor(size.width * dpr);    const newHeight = Math.floor(size.height * dpr);    const currentRes = waveUniformsRef.current.resolution.value;    if (currentRes.x !== newWidth || currentRes.y !== newHeight) {      currentRes.set(newWidth, newHeight);    }  }, [size, gl]);  const prevColor = useRef([...waveColor]);  useFrame(({ clock }) => {    const u = waveUniformsRef.current;    if (!disableAnimation) {      u.time.value = clock.getElapsedTime();    }    if (u.waveSpeed.value !== waveSpeed) u.waveSpeed.value = waveSpeed;    if (u.waveFrequency.value !== waveFrequency)      u.waveFrequency.value = waveFrequency;    if (u.waveAmplitude.value !== waveAmplitude)      u.waveAmplitude.value = waveAmplitude;    if (!prevColor.current.every((v: number, i: number) => v === waveColor[i])) {      u.waveColor.value.set(...waveColor);      prevColor.current = [...waveColor];    }    u.enableMouseInteraction.value = enableMouseInteraction ? 1 : 0;    u.mouseRadius.value = mouseRadius;    if (enableMouseInteraction) {      u.mousePos.value.copy(mouseRef.current);    }  });  const handlePointerMove = (e: ThreeEvent<PointerEvent>) => {    if (!enableMouseInteraction) return;    const rect = gl.domElement.getBoundingClientRect();    const dpr = gl.getPixelRatio();    mouseRef.current.set(      (e.clientX - rect.left) * dpr,      (e.clientY - rect.top) * dpr    );  };  return (    <>      <mesh ref={mesh} scale={[viewport.width, viewport.height, 1]}>        <planeGeometry args={[1, 1]} />        <shaderMaterial          vertexShader={waveVertexShader}          fragmentShader={waveFragmentShader}          uniforms={waveUniformsRef.current}        />      </mesh>      <EffectComposer>        <RetroEffect colorNum={colorNum} pixelSize={pixelSize} />      </EffectComposer>      <mesh        onPointerMove={handlePointerMove}        position={[0, 0, 0.01]}        scale={[viewport.width, viewport.height, 1]}        visible={false}      >        <planeGeometry args={[1, 1]} />        <meshBasicMaterial transparent opacity={0} />      </mesh>    </>  );}export interface DitherProps extends React.HTMLAttributes<HTMLDivElement> {  waveSpeed?: number;  waveFrequency?: number;  waveAmplitude?: number;  waveColor?: [number, number, number];  colorNum?: number;  pixelSize?: number;  disableAnimation?: boolean;  enableMouseInteraction?: boolean;  mouseRadius?: number;}export const Dither = forwardRef<HTMLDivElement, DitherProps>((props: DitherProps, ref) => {  const {    className,    waveSpeed = 0.05,    waveFrequency = 3,    waveAmplitude = 0.3,    waveColor = [0.5, 0.5, 0.5],    colorNum = 4,    pixelSize = 2,    disableAnimation = false,    enableMouseInteraction = true,    mouseRadius = 1,    ...domProps  } = props;  return (    <div      ref={ref}      className={cn("w-full h-full", className)}      {...domProps}    >      <Canvas        className="w-full h-full relative"        camera={{ position: [0, 0, 6] }}        dpr={typeof window !== 'undefined' ? window.devicePixelRatio : 1}        gl={{ antialias: true, preserveDrawingBuffer: true }}      >        <DitheredWaves          waveSpeed={waveSpeed}          waveFrequency={waveFrequency}          waveAmplitude={waveAmplitude}          waveColor={waveColor}          colorNum={colorNum}          pixelSize={pixelSize}          disableAnimation={disableAnimation}          enableMouseInteraction={enableMouseInteraction}          mouseRadius={mouseRadius}        />      </Canvas>    </div>  );});Dither.displayName = 'Dither';export default Dither;

Built for React applications with TypeScript and optimized Three.js rendering. Uses advanced GLSL shaders with Perlin noise algorithms and Bayer matrix dithering for authentic retro graphics while providing extensive controls for wave properties, color palettes, and pixel sizes. Perfect for retro gaming interfaces, pixel art applications, or any project needing that authentic 8-bit aesthetic.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dither.json

npx shadcn@latest add https://www.shadcn.io/registry/dither.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dither.json

bunx shadcn@latest add https://www.shadcn.io/registry/dither.json

Why simple CSS filters feel artificial

Developers create pixelated effects with CSS image-rendering or basic filters and consider them retro. Maybe they add some pixelated borders or color quantization. The problem? Basic CSS can't capture the complex, mathematically-driven nature of true dithering algorithms that emerge from color space quantization, noise pattern mathematics, and authentic pixel art techniques.

Three.js-based dithering with post-processing changes everything. It taps into the fundamental mathematics of computer graphics—the way Bayer matrices create ordered dithering, how color quantization reduces palettes, the organic beauty that emerges from Perlin noise and procedural generation. The algorithms use real dithering matrices and color space mathematics to create authentic retro computing experiences.

This component handles complex dithering mathematics automatically. Perlin noise generation, Bayer matrix calculations, color quantization algorithms, and post-processing effects all work together seamlessly. The result feels like viewing actual 8-bit graphics rendered in real-time.

Features

Three.js rendering pipeline with React Three Fiber for optimized WebGL performance
Procedural wave generation using multi-octave Perlin noise with fractal mathematics
Bayer matrix dithering with authentic 8x8 ordered dithering algorithm implementation
Color quantization system with configurable palette reduction and bit-depth control
Mouse-responsive effects with interactive wave modulation and cursor tracking
Post-processing pipeline with custom shader effects and render-to-texture workflows
Configurable parameters with extensive control over waves, colors, and dithering
Performance optimization with efficient shader compilation and Three.js context management
Responsive design with automatic canvas scaling and device pixel ratio handling
Memory management with proper Three.js cleanup and resource disposal

API Reference

Dither

Prop	Type	Default	Description
`waveSpeed`	`number`	`0.05`	Speed of wave animation
`waveFrequency`	`number`	`3`	Frequency of noise pattern
`waveAmplitude`	`number`	`0.3`	Amplitude of wave oscillation
`waveColor`	`[number, number, number]`	`[0.5, 0.5, 0.5]`	RGB color values (0-1 range)
`colorNum`	`number`	`4`	Number of colors in quantized palette
`pixelSize`	`number`	`2`	Size of pixelated blocks
`disableAnimation`	`boolean`	`false`	Pause wave animations
`enableMouseInteraction`	`boolean`	`true`	Enable mouse-responsive effects
`mouseRadius`	`number`	`1`	Radius of mouse influence
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Color Palettes

Different color configurations for various retro aesthetics:

Palette	Colors	Description
Monochrome	2-4 colors	Classic black and white pixel art
CGA	4 colors	IBM CGA computer graphics
Game Boy	4 colors	Nintendo Game Boy green palette
NES	8 colors	Nintendo Entertainment System
Commodore 64	16 colors	Classic home computer palette

Wave Patterns

Different parameter combinations for various visual effects:

Style	Speed	Frequency	Amplitude	Description
Gentle	0.02	2	0.2	Slow, subtle wave movement
Standard	0.05	3	0.3	Balanced wave animation
Active	0.08	4	0.4	Fast, dynamic patterns
Chaotic	0.1	6	0.6	High-energy, complex waves

Three.js architecture

Rendering Pipeline: Uses React Three Fiber with WebGL for efficient shader-based rendering, post-processing effects with EffectComposer, and optimized uniform management.

Shader Mathematics: Implements multi-octave Perlin noise using Taylor inverse square root and permutation functions for organic wave pattern generation with authentic mathematical noise.

Dithering Algorithm: Uses 8x8 Bayer matrix with ordered dithering mathematics, color quantization with bit reduction, and threshold-based pixel value assignments for authentic retro aesthetics.

Post-Processing Chain: Combines procedural wave generation with dithering effects through custom shader passes and render-to-texture workflows for seamless visual integration.

Performance considerations

Three.js Optimization: Uses efficient shader compilation with React Three Fiber optimizations, minimal uniform updates, and proper WebGL state management for consistent 60fps performance.

Shader Efficiency: Implements optimized GLSL code with reduced branching, efficient loop structures, and minimal texture lookups to reduce GPU computation overhead.

Memory Management: Properly handles Three.js resource lifecycle with automatic cleanup, canvas management, and effect disposal to prevent memory leaks during component unmounting.

Responsive Scaling: Uses device pixel ratio awareness with efficient canvas resizing and automatic viewport adjustments for optimal visual quality across display densities.

Common gotchas

Three.js Dependencies: Component requires Three.js and React Three Fiber ecosystem. Ensure proper version compatibility and SSR handling for Next.js applications.

Color Range: Wave colors should be in 0-1 range (not 0-255). Values outside this range may cause unexpected shader behavior or color clamping issues.

Performance Scaling: High pixel density combined with complex wave patterns can impact performance. Monitor frame rates when increasing visual complexity parameters.

WebGL Context: Component requires WebGL support for Three.js rendering. Gracefully handles context creation but won't render effects without WebGL capability.

Mouse Coordinates: Uses Three.js event system for consistent coordinate transformation across different canvas sizes and device pixel ratios.

Color Quantization: Low color numbers (colorNum < 3) may cause banding artifacts. Balance color reduction with visual quality for optimal retro aesthetics.

React Dither Background

Dynamic dithered waves with authentic pixel art processing

Installation

Why simple CSS filters feel artificial

Features

API Reference

Dither

Color Palettes

Wave Patterns

Three.js architecture

Performance considerations

Common gotchas

You might also like

Noise Background

Faulty Terminal

Pixel Image

Retro Grid

Questions developers actually ask

On this page

React Dither Background

Reactdither

Noise Background

Faulty Terminal

Pixel Image

Retro Grid

How does the Bayer matrix dithering work?

How does this perform on mobile devices?

Are these authentic Perlin noise waves?

Can I create custom color palettes?

Can I create a non-animated version?

How do I modify the wave patterns?

What's the optimal pixel size for different screens?

Can I modify the dithering post-processing effects?

On this page