Dither Shader

A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

Installation

npx shadcn@latest add @aceternity/dither-shader

Pattern

Colors

Size: 3px

Threshold: 0.50

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

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time