Dithering

Installation

npm i @paper-design/shaders-react

Code

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

<Dithering
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 0%)"
  colorFront="hsl(198, 100%, 50%)"
  shape="sphere"
  type="4x4"
  pxSize={2}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={1}
/>

Props

colorBack, colorFront

The two colors used for the effect.

pxSize

Pixel size relative to canvas resolution.

shape

simplex: Simplex noise pattern.
warp: Warp noise pattern.
dots: Columns of dots moving vertically.
wave: Sine wave.
ripple: Ripple effect.
swirl: Swirl animation.
sphere: Rotating sphere.

type

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

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

2-color dithering effect over animated abstract shapes.