ditherwave
npm install ditherwave
ditherwave
a tiny WebGL2 dithering primitive for React.
wrap <img>, <video>, or <canvas> — or drop in <DitheredWaves>.
under 8kb gz. zero deps. MIT.
copy. paste. ship.
the controls above update this snippet in real time. when the look is right, grab it.
"token-key">import { DitheredWaves } "token-key">from 'ditherwave';
"token-tag"><DitheredWaves
waveColor="#39ff14"
baseColor="#050605"
pixelSize={6}
colorNum={4}
waveSpeed={0.04}
waveFrequency={3.2}
waveAmplitude={0.34}
enableMouseInteraction
"token-tag">/>current — phosphor · 4 levels · 6px
one install,
done.
react 18+ peer dep. esm, cjs, and a umd build for CDNs. tree-shakeable. works identically in next.js, vite, and plain html.
$ npm install ditherwave
dither your image.
the background uses <DitheredWaves>. this dropzone uses <Dither> over real content.
drop an image or video
png · jpg · mp4 · webm
six recipes.
click any card to apply its configuration to the hero above.