Beautiful Generative Gradient Avatars for React

Free, zero-dependency React component for generative gradient avatars. Any seed becomes a unique mesh gradient or crisp dither, no stored images. MIT licensed.

@outpacelabs/avatars is a free, open-source React component that renders generative, deterministic mesh-gradient avatars on an HTML canvas. The same seed, whether a user id, email, or username, always produces the same gradient, so you get a stable profile picture with no stored images and no network requests. A pattern prop renders each seed as the signature soft mesh gradient or a crisp ordered dither. Zero dependencies, MIT licensed. Install with npm i @outpacelabs/avatars, then render a GradientAvatar with any seed. What is @outpacelabs/avatars? A zero-dependency React avatar…

saved by

• Sachin
• David Hwang

related reading

• Introduction | Canvas UIcanvasui.dev
• Components | Canvas UIcanvasui.dev
• Paper Shaders – Ultra-fast zero-dependency shadersshaders.paper.design
• MetalForge — Beautiful Metal shaders for SwiftUImetalforge.xyz
• Graphicalgraphicalui.com
• Canvas UI: Creative Canvas, WebGL and WebGPU Component Librarycanvasui.dev
• Shadersshaders.com
• Grainradgrainrad.com
• Unicorn Studio — No-code WebGL Toolunicorn.studio
• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• Replicate - Run AI with an APIreplicate.com
• Methods for random gradientsjustinjay.wang