AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Médhy ChabourMotion & interaction

Hashvatar

Hashvatar turns a stable input into a recognizable mark: radial gradient blends or Bayer halftone dithering, optional animation, and palette restrictions via hex, OKLCH, or CSS color names. The demo site shows the library in action; the npm package ships TypeScript with no runtime deps, useful for Web3 profiles, comment threads, or anywhere Gravatar-style identity needs a lighter, brandable twist.

What's interesting

  • Deterministic avatars from any string, wallet, username, or hash, with gradient and dither modes, zero dependencies, plus React and vanilla JS APIs.
  • Hashvatar turns a stable input into a recognizable mark: radial gradient blends or Bayer halftone dithering, optional animation, and palette restrictions via hex, OKLCH, or CSS color names.
  • The demo site shows the library in action; the npm package ships TypeScript with no runtime deps, useful for Web3 profiles, comment threads, or anywhere Gravatar-style identity needs a lighter, brandable twist.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/hashvatar-com
Hashvatar by Médhy Chabour

Hashvatar turns a stable input into a recognizable mark: radial gradient blends or Bayer halftone dithering, optional animation, and palette restrictions via hex, OKLCH, or CSS color names. The demo site shows the library in action; the npm package ships TypeScript with no runtime deps, useful for Web3 profiles, comment threads, or anywhere Gravatar-style identity needs a lighter, brandable twist.

Adapt for our [screen name]. Stack: [your stack].
Note what to cut or simplify for production.

Tags

AvatarsGenerativeTypeScriptReactCanvasOpen source