Click to change sample image

Image Dithering

Installation

npm i @paper-design/shaders-react

Code

import { ImageDithering } from '@paper-design/shaders-react';

<ImageDithering
  style={{ height: 500 }}
  colorBack="hsl(227, 100%, 11%)"
  colorFront="hsl(135, 100%, 79%)"
  colorHighlight="hsl(72, 100%, 79%)"
  originalColors={false}
  type="8x8"
  pxSize={2}
  colorSteps={2}
  scale={1}
  fit="contain"
/>

Props

colorBack, colorFront, colorHighlight

Colors used for the effect.

originalColors

Use the original colors of the image.

type

random: Random dithering.
2x2: 2x2 Bayer matrix.
4x4: 4x4 Bayer matrix.
8x8: 8x8 Bayer matrix.

pxSize

Pixel size relative to canvas resolution.

colorSteps

Number of colors to use (applies to both color modes).

scale

Overall pattern zoom.

fit

How the image fits the canvas.

Description

Dithering effect using a 3-color palette.