Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Animated two-color dithering applied over one of seven pattern sources: simplex noise, warp, dots, sine wave, ripple, swirl, or a 3D sphere. The dithering matrix can be random, 2×2 Bayer, 4×4 Bayer, or 8×8 Bayer. Pixel size controls the resolution of the dithering grid.

​
Usage

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

export default function Example() {
  return (
    <Dithering
      colorBack="#000000"
      colorFront="#00b2ff"
      shape="sphere"
      type="4x4"
      size={2}
      speed={1}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#000000"
Background color (the darker dithered shade).
​
colorFront
string
default:"#00b2ff"
Foreground color (the lighter dithered shade).
​
shape
string
default:"\"sphere\""
Pattern source used as the input grayscale for dithering. See shape options below.
​
type
string
default:"\"4x4\""
Dithering matrix type. See type options below.
​
size
number
default:"2"
Pixel size of the dithering grid. Range: 0.5 to 20.
​
speed
number
default:"1"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Shape options

The DitheringShapes enum provides the available pattern sources:
KeyValueDescription
simplex1Animated simplex noise
warp2Sinusoidal warp flow
dots3Orbiting dot pattern
wave4Sine wave
ripple5Radial ripple
swirl6Polar swirl
sphere7Lit 3D sphere

​
Type options

The DitheringTypes enum provides the available dithering matrix types:
KeyValueDescription
random1Random noise dithering
2x222×2 ordered Bayer matrix
4x434×4 ordered Bayer matrix
8x848×8 ordered Bayer matrix

​
Presets

NameDescription
DefaultSphere with 4×4 Bayer, black and blue
WarpWarp flow with 4×4 Bayer, green on dark
Sine WaveWave with 4×4 Bayer, cyan on magenta
RippleRipple with 2×2 Bayer, warm brown tones
BugsDots with random dithering, green on black
SwirlSwirl with 8×8 Bayer, blue on transparent

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.