Dither Image

New

A photo redrawn in two colours, one dot at a time

$ npx @hritik-sharmaa/repeat-ui add image-dither-image

Live preview

Customize

Width420px

Height300px

Algorithm

Dot size2px

Tones2

Brightness0

Contrast1.15×

Sharpen0.5

Dark

Light

Scan in

Lens90px

Radius24px

import ImageDitherImage from "@/components/repeat-ui/image-dither-image/preview";

<ImageDitherImage />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add image-dither-image --variant ts-tailwind

The files are in components/repeat-ui/image-dither-image/.

import ImageDitherImage from "@/components/repeat-ui/image-dither-image/preview";

export default function Page() {
  return <ImageDitherImage />;
}

Prop	Type	Default	Description	Options
`src`	`string`	Mountain photo	Image URL; same-origin or served with CORS headers.	-
`alt`	`string`	""	Image description for screen readers.	-
`width`	`number`	420	Width in pixels.	-
`height`	`number`	300	Height in pixels.	-
`algorithm`	`"atkinson" \| "floyd-steinberg" \| "bayer" \| "noise" \| "threshold"`	"atkinson"	How tones become dots: error diffusion (Atkinson, Floyd–Steinberg), an ordered pattern (Bayer, noise) or a plain cut-off.	atkinson \| floyd-steinberg \| bayer \| noise \| threshold
`pixelSize`	`number`	2	Size of each dot in pixels; rounded to whole screen pixels so dots stay crisp.	-
`levels`	`number`	2	Number of tones, from the dark colour to the light one.	-
`brightness`	`number`	0	Lighten or darken before dithering.	-
`contrast`	`number`	1.15	Contrast before dithering.	-
`sharpen`	`number`	0.5	Edge sharpening, so detail survives the dots.	-
`darkColor`	`string`	"#141414"	Colour of the darkest dots.	-
`lightColor`	`string`	"#ece8dc"	Colour of the lightest dots.	-
`reveal`	`boolean`	true	Scan the image in from the top when it loads.	-
`lensSize`	`number`	90	Diameter of the hover lens onto the original; 0 turns it off.	-
`radius`	`number`	24	Corner radius in pixels.	-
`className`	`string`	""	Extra classes for the root element.	-