Dithering
Installation
npm i @paper-design/shaders-react
Code
import { Dithering } from '@paper-design/shaders-react';
<Dithering
height={500}
colorBack="#000000"
colorFront="#00b3ff"
shape="sphere"
type="4x4"
pxSize={2}
offsetX={0}
offsetY={0}
scale={0.6}
rotation={0}
speed={1}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorFront | The foreground (ink) color | string | Hex, RGB, or HSL color |
| shape | Shape pattern type | enum | | "simplex" | "warp" | "dots" | "wave" | "ripple" | "swirl" | "sphere" |
| type | Dithering type | enum | | "random" | "2x2" | "4x4" | "8x8" |
| pxSize | Pixel size of dithering grid | number | 1 to 20 |
| offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
| offsetY | Vertical offset of the graphics center | number | -1 to 1 |
| 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.01 to 4 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| speed | Animation speed | number | 0 to 2 |
Description
Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere). Great for retro, print-like, or stylized UI textures.