Image Dithering
Click to change the sample image
Installation
npm i @paper-design/shaders-react
Code
import { ImageDithering } from '@paper-design/shaders-react';
<ImageDithering
height={500}
colorBack="#000c38"
colorFront="#94ffaf"
colorHighlight="#eaff94"
originalColors={false}
type="8x8"
pxSize={2}
colorSteps={2}
scale={1}
fit="cover"
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorFront | The main foreground color | string | Hex, RGB, or HSL color |
| colorHighlight | The secondary foreground color (set it same as colorFront to get a classic 2-color dithering) | string | Hex, RGB, or HSL color |
| originalColors | Use the original colors of the image | boolean | | true | false |
| type | Dithering type | enum | | "random" | "2x2" | "4x4" | "8x8" |
| pxSize | Pixel size of dithering grid | number | 0.5 to 20 |
| colorSteps | Number of colors to use (applies to both color modes) | number | 1 to 7 (integer) |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.5 to 10 |
| fit | How the image fits the canvas | enum | | "contain" | "cover" |
Description
A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image).