Agent Avatar

1"use client";
2 
3import { useEffect, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6export type AgentAvatarProps = Omit<
7  React.HTMLAttributes<HTMLDivElement>,
8  "children"
9> & {
10  seed: string;
11  size?: number;
12  animated?: boolean;
13  /** Base hue (0-360). Blue ≈ 200, Orange ≈ 30, Cyan ≈ 185 */
14  hue?: number;
15  /** Show rotating outer ring */
16  ring?: boolean;
17};
18 
19/* ── helpers ─────────────────────────────────────────── */
20 
21const hashSeed = (str: string): number => {
22  let h = 0;
23  for (const c of str) {
24    h = ((h << 5) - h + c.charCodeAt(0)) | 0;
25  }
26  return Math.abs(h);
27};
28 
29const createRng = (seed: number) => {
30  let s = seed;
31  return () => {
32    s = (s + 0x6d_2b_79_f5) | 0;
33    let t = Math.imul(s ^ (s >>> 15), 1 | s);
34    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
35    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
36  };
37};
38 
39/* ── ring layout ─────────────────────────────────────── */
40 
41const RINGS = [
42  { r: 0.88, segments: 16, width: 0.065 },
43  { r: 0.7, segments: 12, width: 0.07 },
44  { r: 0.52, segments: 8, width: 0.08 },
45  { r: 0.34, segments: 6, width: 0.09 },
46];
47 
48interface Segment {
49  on: boolean;
50  phase: number;
51  ringIdx: number;
52  segIdx: number;
53}
54 
55const generateSegments = (hash: number): Segment[] => {
56  const rng = createRng(hash);
57  const segments: Segment[] = [];
58  for (let ri = 0; ri < RINGS.length; ri++) {
59    const count = RINGS[ri].segments;
60    for (let si = 0; si < count; si++) {
61      segments.push({
62        on: rng() > 0.35,
63        phase: rng() * Math.PI * 2,
64        ringIdx: ri,
65        segIdx: si,
66      });
67    }
68  }
69  return segments;
70};
71 
72/* ── component ───────────────────────────────────────── */
73 
74export function AgentAvatar({
75  seed,
76  size = 64,
77  animated = true,
78  hue,
79  ring = true,
80  className,
81  ...props
82}: AgentAvatarProps) {
83  const canvasRef = useRef<HTMLCanvasElement>(null);
84  const rafRef = useRef<number>(0);
85 
86  const hash = hashSeed(seed);
87  const baseHue = hue ?? hash % 360;
88  const glowColor = `hsl(${baseHue}, 85%, 55%)`;
89 
90  useEffect(() => {
91    const canvas = canvasRef.current;
92    if (!canvas) {
93      return;
94    }
95    const ctx = canvas.getContext("2d");
96    if (!ctx) {
97      return;
98    }
99 
100// … truncated