Avatar Stack Flock

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5// ---------------------------------------------------------------------------
6// FlockStack — team avatar stack that never sits still: at rest the avatars
7// mill as a bounded boids flock (separation / alignment / cohesion + soft
8// walls); hovering or keyboard-focusing the region ramps a seek force toward
9// each avatar's slot in the classic overlapping row, SUMMED into the same
10// three rules, so the tidy "group photo" is itself a settled flocking state.
11// Pure DOM — per-frame transforms from a refs-only vector sim, no canvas, no
12// React state on the hot path. Every color is a CSS token class (nothing is
13// read via getComputedStyle, so there is nothing to re-derive on theme
14// change — ring-background / border-border / bg-surface self-adapt). The +N
15// badge fades in only once the formation resolves; once resolved AND settled
16// the rAF loop genuinely sleeps until hover exit. Static resolved row under
17// prefers-reduced-motion.
18// ---------------------------------------------------------------------------
19 
20export interface FlockMember {
21  name: string;
22  /** 1–2 chars; derived from name when omitted */
23  initials?: string;
24  /** optional avatar image url; initials shown otherwise */
25  src?: string;
26}
27 
28const DEFAULT_MEMBERS: FlockMember[] = [
29  { name: "Mara Chen" },
30  { name: "Jonas Weber" },
31  { name: "Aiko Tanaka" },
32  { name: "Sam Okafor" },
33  { name: "Lena Fischer" },
34  { name: "Ravi Patel" },
35  { name: "Nora Lindqvist" },
36];
37 
38function initialsOf(m: FlockMember) {
39  if (m.initials) return m.initials.slice(0, 2).toUpperCase();
40  return m.name
41    .split(/\s+/)
42    .map((w) => w[0] ?? "")
43    .join("")
44    .slice(0, 2)
45    .toUpperCase();
46}
47 
48// deterministic PRNG for the initial scatter (stable across strict-mode runs)
49function mulberry32(seed: number) {
50  let a = seed >>> 0;
51  return () => {
52    a = (a + 0x6d2b79f5) >>> 0;
53    let t = a;
54    t = Math.imul(t ^ (t >>> 15), t | 1);
55    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
56    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
57  };
58}
59 
60// sim constants — px, seconds
61const SEP_R = 34;
62const SEP_W = 1.4;
63const ALI_R = 60;
64const ALI_W = 0.6;
65const COH_R = 90;
66const COH_W = 0.5;
67const MAX_SPEED = 60; // px/s while milling — keeps the ambient drift calm
68const SEEK_MAX_SPEED = 480; // px/s ceiling while seeking, ramped in with seekT
69const MAX_FORCE = 260; // steering clamp, px/s^2
70const WALL_M = 24; // soft-wall ramp distance
71// … truncated