Fallback Avatar

Renders a gradient avatar based on a name string. It generates unique colors and visual patterns using hash calculations. The avatar is displayed as a canvas element. Use it when a user's profile picture is unavailable.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/fallback-avatar

npx layro-cli add @xxtomm/fallback-avatar

npx layro-cli add @xxtomm/fallback-avatar

bunx layro-cli add @xxtomm/fallback-avatar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

// --- Hash utilities ---

function hashString(str: string): [number, number] {
  let h1 = 0xdeadbeef;
  let h2 = 0x41c6ce57;
  for (let i = 0; i < str.length; i++) {
    const ch = str.charCodeAt(i);
    h1 = Math.imul(h1 ^ ch, 2654435761);
    h2 = Math.imul(h2 ^ ch, 1597334677);