Dithering

​

React Usage

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

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

​

Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountDithering(canvas, {
  colorBack: '#000000',
  colorFront: '#00b2ff',
  shape: 'sphere',
  type: '4x4',
  size: 2,
  speed: 1,
});

// Call cleanup() when done

​

Parameters

​

Common Sizing Parameters

​

Presets

• Default: Blue sphere with 4×4 Bayer dithering
• Warp: Green flowing pattern with 4×4 dithering
• Sine Wave: Cyan wave with 4×4 dithering
• Ripple: Orange circular ripples with 2×2 dithering
• Bugs: Green animated dots with random dithering
• Swirl: Blue vortex with 8×8 dithering

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

<Dithering {...swirlPreset.params} />

​

Notes

• This shader performs sizing in the fragment shader to keep pixel grid consistent
• Different dithering types create different visual textures:
  • random: Organic, grainy appearance
  • 2x2: Coarse, checkerboard-like pattern
  • 4x4: Medium detail, classic dithering look
  • 8x8: Fine detail, smooth gradations
• Experiment with size parameter to achieve retro pixel art effects