Shader 6 - Dithered Wave Shader

Pro

A full-screen shader background with cosine wave pattern, Bayer dither, and configurable foreground and background colors.
Shadcn Shader 6 block

Component Data

  • ID:shader6
  • Access:pro
  • Created:Dec 17, 2025
  • Type:block

Shader 6 block design & features

Shader6 is a full-screen shader background built with shadcn/ui and React Three Fiber, rendering a procedural wave pattern with cosine-based color. The shader applies a 4x4 Bayer dither to convert the color output to black and white, then maps the result to configurable foreground and background colors. A color prop controls the foreground (default orange), and a backgroundColor prop controls the background (default black).

Two-color palette with dithered pattern. The wave reads as flowing bands or stripes. The dither adds a retro, pixel-art texture. Continuous animation.

Retro and minimal. The Bayer dither is the distinctive feature. Low complexity with color and backgroundColor props.