Ditho — Animated Dither Backgrounds

Presets:

Aurora Preset

Aurora Borealis

Domain-warped procedural field with rich ribbon transitions and Bayer 8×8 quantization.

Mode: Bayer 8×8

Dither Pixel: 2px

Seed: 42

Scale: 1.0

Cadence 60 FPS

JS CPU Draw 0.2 ms

GPU Render N/A

Drawing Buffer 1200×600

Fillrate 0.72M px

Procedural Preset

Dither Algorithm

Pixel Size 2px

Field Scale 1.0

Intensity / Contrast 1.1

Speed 0.22

Deterministic Seed

Resolution Scale

Reduced Motion

Frame Rate Limit

Max DPR Cap

Ordered Palette Ramp (5 stops)

Compare ordered / noise quantization directly against the undithered continuous reference running synchronously in real time.

Bayer 8×8 (2px)

Quantized with threshold matrix across color stops

None (Continuous)

Continuous scalar field linearly mixed across palette

Each preset couples a procedural field model with tailored palette ramps and dithering parameters.

Mount backgrounds without imperative JS using data-dither="preset" attributes and root MutationObserver.

data-dither="cyber"

Initialized automatically via initDither() and data attributes.

data-dither="ocean"

Tracks DOM mutations, attribute updates, and tree changes seamlessly.