vibes-avatar

Deterministic gradient avatars with good vibes - inspired by Laravel Avatars

Generate beautiful mesh gradient avatars completely client-side with zero dependencies and no HTTP calls needed!

🎨 Inspiration

This package is inspired by Taylor Otwell's Laravel Avatars, but runs entirely locally without requiring any HTTP requests. Perfect for generating deterministic, beautiful gradient avatars for your users!

Why use this instead of Laravel Avatars?

✅ No HTTP calls - Everything runs client-side
✅ Faster - No network latency
✅ Offline support - Works without internet
✅ Zero dependencies - Lightweight and simple
✅ Same deterministic output - Same input = same avatar
✅ Lightweight (~2KB gzipped)

Installation

npm install vibes-avatar

Usage

Basic JavaScript/TypeScript

import { generateAvatarSVG, generateAvatarDataURL } from "vibes-avatar";

// Generate SVG string
const svg = generateAvatarSVG("[email protected]");

// Generate data URL for img src
const dataUrl = generateAvatarDataURL("[email protected]");

// With specific vibe
const svgWithVibe = generateAvatarSVG("[email protected]", "ocean");

// Custom size
const largeSvg = generateAvatarSVG("[email protected]", "sunset", 400);

HTML/CSS

<img id="avatar" />

<script type="module">
  import { generateAvatarDataURL } from "vibes-avatar";

  document.getElementById("avatar").src =
    generateAvatarDataURL("[email protected]");
</script>

API

generateAvatarSVG(input, vibe?, size?)

Generates an SVG string.

• input: string - Any text (email, UUID, name, etc.)
• vibe: string (optional) - One of: ocean, sunset, fire, forest, bubble, daybreak, crystal, ice, stealth
• size: number (optional) - Size in pixels (default: 200)

generateAvatarDataURL(input, vibe?, size?)

Generates a data URL for use in img src.

generateAvatarData(input, vibe?)

Returns raw avatar data (colors, positions, etc.) for custom rendering.

getVibeForInput(input)

Returns the auto-selected vibe for a given input.

Available Vibes

• ocean - Blues and cyans
• sunset - Oranges and reds
• fire - Reds and yellows
• forest - Greens
• bubble - Pinks and magentas
• daybreak - Yellows
• crystal - Purples
• ice - Light blues
• stealth - Grays

License

MIT