Effect

Ditherize

An image treatment that combines ordered dithering with a WebGL particle layer. Dot size, spacing, angle, and palette remain adjustable per image.

Dot size

Spacing

Angle

45°

example.tsx

import { Ditherize } from "@/components/ui/ditherize"

export function Demo() {
  return (
    <Ditherize
      src="/image.png"
      dotSize={3}
      spacing={5}
      angle={45}
      palette="violet"
    />
  )
}