Skip to main content

​
Overview

The Dither Shader component applies real-time ordered dithering effects to images, creating pixel art and retro aesthetics. It supports multiple dithering modes, color processing options, and customizable parameters.

​
Usage

<DitherShader
  src="/path/to/image.jpg"
  :gridSize="4"
  ditherMode="bayer"
  colorMode="duotone"
  primaryColor="#000000"
  secondaryColor="#ffffff"
  class="w-full h-96"
/>

​
Props

​
src
string
required
Source image URL.
​
gridSize
number
default:"4"
Size of the dithering grid cells.
​
ditherMode
'bayer' | 'halftone' | 'noise' | 'crosshatch'
default:"bayer"
Type of dithering pattern.
​
colorMode
'original' | 'grayscale' | 'duotone' | 'custom'
default:"original"
Color processing mode.
​
invert
boolean
default:"false"
Invert the dithered output colors.
​
pixelRatio
number
default:"1"
Pixelation multiplier (1 = no pixelation, higher = more pixelated).
​
primaryColor
string
default:"#000000"
Primary color for duotone mode.
​
secondaryColor
string
default:"#ffffff"
Secondary color for duotone mode.
​
customPalette
string[]
default:"['#000000', '#ffffff']"
Custom color palette array for custom mode.
​
brightness
number
default:"0"
Brightness adjustment (-1 to 1).
​
contrast
number
default:"1"
Contrast adjustment (0 to 2, 1 = normal).
​
backgroundColor
string
default:"transparent"
Background color behind the dithered image.
​
objectFit
'cover' | 'contain' | 'fill' | 'none'
default:"cover"
Object fit behavior.
​
threshold
number
default:"0.5"
Threshold bias for dithering (0 to 1).
​
animated
boolean
default:"false"
Enable animation effect.
​
animationSpeed
number
default:"0.02"
Animation speed (lower = slower).
​
class
string
Additional CSS classes for the container (use this to set size via Tailwind).

​
Credits

Inspired and ported from Aceternity UI Dither Shader.

Build docs developers (and LLMs) love

Get started for freeTalk to us