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.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.