Ordered-dither gradients from any string, and every classic way to dither an image. One small library, no dependencies, the same picture every time.
Only name is needed. Everything else has a default, and anything you set wins over what the name decided.
Nobody picked these colors. Each tile is a string, hashed into a palette, a layout and a texture. Hover one to watch it drift, click it to open it in the editor.
Feed it a slug or a username and you have a cover image, a banner or a placeholder that is stable across deploys, with nothing to upload and nothing to store.
The same package dithers pixels: Floyd-Steinberg, Atkinson, Bayer and five more, on a canvas, in a worker or in Node. Here is one smooth gradient, three ways, in black and white.
Dithering fakes colors a palette does not have by scattering pixels of the colors it does have, so the eye blends them. Error diffusion methods such as Floyd-Steinberg pass each pixel’s rounding error on to its neighbours; ordered dithering such as Bayer compares every pixel against a fixed threshold pattern.
A soft color field drawn by one WebGL shader, then pixelated and thresholded through a Bayer matrix, so it reads like an old screen instead of a smooth blend. ditherdance hashes any string into the palette, the layout and the texture, so you only pass a name.
Yes. Names are NFC-normalized, trimmed and lowercased, then hashed, and the result is the same in every browser and on the server. That makes it a good fit for avatars, post covers and placeholders you never have to store.
Floyd-Steinberg, Atkinson, Jarvis-Judice-Ninke, Stucki, Burkes, Sierra and Sierra Lite error diffusion, plus Bayer ordered dithering with a 2, 4, 8 or 16 matrix. Every method works with any palette of RGB colors.
All three. There is a <dither-gradient> web component, a DitherGradient component for React and one for Vue 3, and createGradient for plain JavaScript. React and Vue are optional peer dependencies; nothing else needs a framework.
Yes. Importing on the server does nothing, and the React and Vue components render a flat average color until they mount. Image dithering runs on any RGBA buffer, so it works in a Web Worker or in Node with a buffer from sharp.
It has no dependencies. The image half is about 2 kB gzipped and the gradient half about 8 kB, both as tree-shakeable ES modules with TypeScript types.
Yes. It is open source under the Apache-2.0 license, which allows commercial use. The code is on GitHub and the package is on npm as ditherdance.