Shavin UI Docs & Component Gallery

Interactive Playground

Source Type

Sample Artwork

Custom URL

Matrix Algorithm

Variant

Pixelation Factor1.00x

Anatomy

import { DitherCanvas } from "@shavin/fx";

<DitherCanvas
  src="/assets/hq_marshall.jpg"
  algorithm="bayer8x8"
  color="accent"
  scale={1.2}
  className="rounded-[var(--radius-panel)]"
/>

Examples

Bayer 8×8 Ordered Dithering

High-frequency 64-level ordered dither pattern with true RGB preservation.

<DitherCanvas
  src="/assets/hq_marshall.jpg"
  algorithm="bayer8x8"
  color="default"
  scale={1.0}
  className="max-w-xs"
/>

Bayer 4×4 Coarse Dithering

16-level matrix with theme accent mapping for coarse 8-bit retro crunch.

<DitherCanvas
  src="/assets/hq_marshall.jpg"
  algorithm="bayer4x4"
  color="accent"
  scale={1.6}
  className="max-w-xs"
/>

Real-Time Video Dithering (60 FPS GPU)

Hardware-accelerated WebGL Bayer dithering on live streaming video.

<DitherCanvas
  src="/assets/dither-sample.mp4"
  algorithm="bayer8x8"
  color="accent"
  scale={1.4}
  autoPlay={true}
  loop={true}
  muted={true}
  className="max-w-md rounded-[var(--radius-panel)]"
/>

Props Reference

Prop	Type	Default	Description
src	string \| ThemedValue<string>	"/assets/hq_marshall.jpg"	Image or Video URL / path (.jpg, .png, .webp, .svg, .mp4, .webm, blob).
color	"default" \| "true" \| "accent" \| "monochrome" \| string	"default"	Color mapping mode ("default" preserves source RGB, "accent" tints with theme accent, "monochrome" renders high-contrast B&W, or custom hex string).
algorithm	"bayer8x8" \| "bayer4x4" \| "floyd-steinberg"	"bayer8x8"	Dithering threshold matrix or error diffusion algorithm.
scale	number	1.0	Pixelation scale factor multiplier.
mediaType	"auto" \| "image" \| "video"	"auto"	Explicit media type override (auto-detects from extension or blob).
threshold	number	128	Dither bias threshold (0 to 255).
autoPlay	boolean	true	For video sources: automatically play video on mount.
loop	boolean	true	For video sources: loop playback indefinitely.
muted	boolean	true	For video sources: mute audio track for autoplay compatibility.
playsInline	boolean	true	For video sources: play inline on mobile browsers.