Avatar Spring Stack

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { cn } from "@/lib/utils";
5import { AnimatePresence, motion } from "motion/react";
6import { useState } from "react";
7 
8/* ═══════════════════════════════════════════════════════════
9   Magnetic Repulsion — each avatar is a charged body. Hover
10   one and neighbors spring away in proportion to 1/distance,
11   creating a lens-like spread that follows your cursor.
12   The wave isn't animated — it emerges from the spring physics.
13   ═══════════════════════════════════════════════════════════ */
14 
15interface AvatarSpringStackItem {
16  src: string;
17  alt?: string;
18  label?: string;
19}
20 
21interface AvatarSpringStackProps {
22  avatars: AvatarSpringStackItem[];
23  maxVisible?: number;
24  size?: number;
25  className?: string;
26}
27 
28export default function AvatarSpringStack({
29  avatars,
30  maxVisible = 5,
31  size = 44,
32  className,
33}: AvatarSpringStackProps) {
34  const [activeIdx, setActiveIdx] = useState<number | null>(null);
35 
36  const visible = avatars.slice(0, maxVisible);
37  const extra = avatars.length - maxVisible;
38  const total = visible.length + (extra > 0 ? 1 : 0);
39 
40  const overlap = Math.round(size * 0.32);
41  const step = size - overlap;
42  const spread = Math.round(size * 0.45);
43 
44  function getOffset(idx: number) {
45    if (activeIdx === null) return 0;
46    const d = idx - activeIdx;
47    if (d === 0) return 0;
48    return (d > 0 ? 1 : -1) * (spread / Math.abs(d));
49  }
50 
51  const hasActive = activeIdx !== null;
52 
53  return (
54    <div
55      className={cn("relative", className)}
56      style={{ width: (total - 1) * step + size, height: size }}
57      onMouseLeave={() => setActiveIdx(null)}
58    >
59      {visible.map((avatar, idx) => {
60        const active = activeIdx === idx;
61 
62        return (
63          <motion.div
64            key={idx}
65            className="absolute top-0 cursor-pointer"
66            animate={{
67              x: idx * step + getOffset(idx),
68              y: active ? -6 : 0,
69              scale: active ? 1.08 : 1,
70            }}
71            transition={{
72              x: { type: "spring", stiffness: 500, damping: 30 },
73              y: { type: "spring", stiffness: 420, damping: 22 },
74// … truncated