Is @outpacelabs/avatars free?

Yes. It is free and open source under the MIT license, for commercial or personal projects, with no attribution required.

How are the gradients generated?

Each gradient is derived deterministically from its seed via a hashing function, so the same seed always yields the same gradient. Nothing is stored and no network request is made.

Can it render anything besides gradients?

Yes. The pattern prop switches between the default soft mesh gradient and a crisp ordered dither of the same palette. Both render deterministically from the seed.

Does it make network requests?

No. Avatars render entirely client-side on an HTML canvas. Nothing is uploaded, hashed to a remote service, or stored, which is good for privacy and offline use.

Does it work without React?

Yes. The bundled engine is re-exported, so you can render gradients to a canvas, data URL, or Blob outside React using helpers like gradientToDataURL and generatePalette.

What frameworks does it support?

Any React 18+ application, including Next.js. React is the only peer dependency.

How is it different from Boring Avatars?

Boring Avatars renders SVG shapes; @outpacelabs/avatars renders gradient/mesh fills on an HTML canvas with zero dependencies and no network requests.

Changelog | @outpacelabs/avatars

v0.6.0August 28, 2026

Every seed gets its own hue

Different seeds could land on almost the same colors. The base hue now spreads across the full range, so distinct seeds look distinct.

FixedThe base hue came from a coarse formula with only 144 possible values, 2.5° apart, so different string seeds often shared a look. It now uses golden-ratio hashing across the full range, so two distinct seeds almost never share a hue.

ImprovedThis re-rolls the exact colors of existing seeds. The promise is unchanged: the same seed always renders the same avatar; each palette is just drawn from a finer, better-spread hue. The seed 0 avatar is unchanged.

v0.5.0August 14, 2026

Avatars that fit their size

Complexity now follows the size an avatar is shown at, so a 24px avatar reads as one clean mark instead of a muddy blob. Plus a Create page to tune every prop visually.

ImprovedAvatars now draw for the size they are shown at: a small one gets fewer colors and fewer, larger shapes instead of blending into a muddy blob, a big one keeps the full detail. Both patterns, driven by the size prop.

NewdisplaySize option on every engine helper: the on-screen size in CSS pixels, for when you draw at a higher resolution than you display.

FixedDither cells now tile the frame exactly instead of overlapping by a pixel, so no cell edge doubles up.

NewCreate page: live preview for seed, size, shape, and pattern with copy-ready JSX.

ImprovedEvery dither now ramps along the same fixed diagonal, so a set of dithers reads as one family; previously each seed picked a random axis.

v0.4.0July 18, 2026

Bring your own colors, and P3

Use your own palette instead of the seed-derived harmony, and opt into the wide-gamut Display P3 color space.

Newcolors prop (and generatePalette option): supply your own hex palette; the seed still drives the layout, so every seed stays unique but on-brand.

Newp3 prop: render in the Display P3 wide-gamut color space, more vivid on capable screens, unchanged everywhere else.

ImprovedEvery engine helper now takes colors and p3 options, wired through renderGradient, gradientToDataURL, and gradientToBlob.

v0.3.0July 14, 2026

The dither pattern

A second render engine: an ordered (Bayer 8×8) dither of the same palette, alongside the mesh gradient.

NewNew pattern prop on GradientAvatar: "mesh" (the default soft gradient) or "dither" (a crisp ordered dither of the same colors).

NewdrawDither engine helper, re-exported alongside drawMeshGradient for use outside React.

NewSwitch every avatar on the home page between gradient and dither with one control.

v0.2.2July 8, 2026

Safari blur fallback and typed CJS

A compatibility round: exports keep their soft blur everywhere, and CommonJS consumers get real types.

FixedSafari 16 and older silently ignore the 2D-canvas filter; exports now approximate the blur through a downscale bounce, so gradientToDataURL and gradientToBlob keep the signature soft look.

FixedThe exports map now points require() at .d.cts type declarations, fixing TypeScript resolution for CommonJS consumers.

ImprovedA palette-stability test suite locks the deterministic output, so the same seed keeps rendering the same gradient across releases.

v0.2.1June 19, 2026

MIT license and a proper README

Housekeeping so the package is safe and pleasant to adopt.

NewThe MIT license now ships inside the package itself.

ImprovedRewritten README: live playground links, the full props table, and every engine helper documented.

v0.1.0April 23, 2026

Initial release

Deterministic mesh-gradient avatars for React, with the whole gradient engine bundled in.

NewGradientAvatar component: any seed becomes a stable avatar with seed, size, radius, className, and style props.

NewEngine helpers re-exported for use outside React: drawMeshGradient, renderGradient, gradientToDataURL, gradientToBlob, generatePalette, seedFromString, and toSeed.

NewZero dependencies, no network requests, MIT licensed.