Agent Avatar

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useEffect, useRef } from "react";
5 
6export type AgentAvatarProps = Omit<
7  React.CanvasHTMLAttributes<HTMLCanvasElement>,
8  "children"
9> & {
10  /** String seed to generate a unique deterministic avatar pattern */
11  seed: string;
12  /** Diameter in pixels */
13  size?: number;
14  /** Enable pixel animation (respects prefers-reduced-motion) */
15  animated?: boolean;
16};
17 
18const GRID_SIZE = 6;
19 
20/** Pulse: each pixel oscillates lightness independently */
21const PULSE_SPEED = 0.002;
22const PULSE_AMPLITUDE = 22;
23 
24/** Breathe: global slow scale oscillation */
25const BREATHE_SPEED = 0.001;
26const BREATHE_AMPLITUDE = 10;
27 
28/** Wave: diagonal sweep across the grid */
29const WAVE_SPEED = 0.0015;
30const WAVE_AMPLITUDE = 15;
31const WAVE_LENGTH = 3;
32 
33/** Sparkle: random bright flashes */
34const SPARKLE_SPEED = 0.004;
35const SPARKLE_THRESHOLD = 0.92;
36const SPARKLE_BOOST = 25;
37 
38/** Scale pulse: whole avatar breathes in size */
39const SCALE_PULSE_SPEED = 0.0008;
40const SCALE_PULSE_AMOUNT = 0.03;
41 
42/** Max hue spread from base — wider for richer color variation */
43const HUE_SPREAD = 45;
44 
45const GLOW_RADIUS_RATIO = 0.25;
46 
47/** Simple deterministic hash from a string */
48const hashSeed = (str: string): number => {
49  let hash = 0;
50  for (const char of str) {
51    hash = ((hash << 5) - hash + char.charCodeAt(0)) | 0;
52  }
53  return Math.abs(hash);
54};
55 
56/** Seeded PRNG (mulberry32) */
57const createRng = (seed: number) => {
58  let state = seed;
59  return () => {
60    state = (state + 0x6d_2b_79_f5) | 0;
61    let t = Math.imul(state ^ (state >>> 15), 1 | state);
62    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
63    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
64  };
65};
66 
67type HSL = [hue: number, saturation: number, lightness: number];
68 
69/** Derive a 3-color palette within the same hue family */
70const generatePalette = (hash: number): [HSL, HSL, HSL] => {
71  const rng = createRng(hash);
72  const baseHue = rng() * 360;
73  const sat = 75 + rng() * 20; // 75-95%
74 
75  return [
76    [baseHue, sat, 55 + rng() * 10],
77    [
78      (baseHue - HUE_SPREAD + rng() * HUE_SPREAD * 2) % 360,
79      sat - 5 + rng() * 10,
80      40 + rng() * 15,
81    ],
82    [
83      (baseHue - HUE_SPREAD + rng() * HUE_SPREAD * 2) % 360,
84      sat - 10 + rng() * 15,
85      60 + rng() * 15,
86    ],
87  ];
88};
89 
90type Cell = {
91  colorIndex: number;
92  phase: number;
93  brightness: number;
94  sparklePhase: number;
95};
96 
97/** Build a grid with per-cell metadata */
98const generateGrid = (hash: number): Cell[][] => {
99// … truncated