ditherwave 0.1.0

First public release of ditherwave — a tiny WebGL2 dithering primitive for React.

npm install ditherwave

Components

• <Dither> — wraps any <img>, <video>, or <canvas> and re-renders it through a WebGL2 dither pass every frame. Live video sampling via requestVideoFrameCallback when available.
• <DitheredWaves> — full-bleed animated fBm-noise background, dithered and palette-quantised. Drop-in hero. Inspired by reactbits' Dither background, reimplemented in raw WebGL2 to skip the three.js dependency.

Modes

• bayer — ordered dithering, configurable 2×2 / 4×4 / 8×8 matrices.
• floyd — Riemersma-style Hilbert-walk approximation of Floyd-Steinberg (single-pass GPU; not true FS).
• dots — newspaper halftone, rotated 15° for authentic print feel.
• ascii — luminance-indexed glyph atlas, customisable charset.

Distribution

• ESM, CJS, and UMD outputs, all with sourcemaps.
• Separate ditherwave/vanilla entry — zero React imports for plain HTML / CDN consumers.
• React is an optional peer dep.
• Bundle: ~8 kb gzipped (index), ~7 kb gzipped (vanilla).

Use without React

<canvas id="bg" style="width:100%;height:100vh"></canvas>
<script type="module">
  import { createDitheredWaves } from 'https://esm.sh/ditherwave/vanilla';
  createDitheredWaves(document.getElementById('bg'), {
    waveColor: '#39ff14',
    baseColor: '#050605',
  });
</script>

See the README for the full API.

---

Full Changelog: https://github.com/sahilsaini5/ditherwave/commits/v0.1.0