Dither Canvas

Overview

Dither Canvas creates a supporting surface: a grainy digital texture gives the hero signal.

Use it behind hero copy, product sections, and technical brand moments where the background should make the page feel engineered without asking the browser to run a cinematic universe.

The main risk is readability. Headlines, body copy, fields, and CTAs must stay clear above the layer. The effect should be easy to freeze, lower in density, or replace with a static texture on mobile and reduced-motion contexts.

Install

Usage

Component Code

Example Production Use Case

Use this as background-layer implementation guidance. Verify whether the shipped effect is CSS, canvas, or another rendering layer before publishing density, speed, color, opacity, dependency, or default-value details. In production, preserve readable HTML above the surface, cap animation cost, pause offscreen work, and provide a static fallback.

Best Used For

• Technical and editorial heroes where grain, signal, or computational texture supports the claim.

• Short, high-contrast sections that can pause animation or swap to a static texture.

• Dither Canvas adds atmosphere behind the message without making the background the product.

Not For

Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost.

Performance Budget

Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback.

Accessibility and Mobile

Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high.

Common Mistakes

• Letting Dither Canvas compete with foreground text.
• Animating canvas work offscreen.
• Choosing canvas/WebGL when CSS would do the job.