Avatar Group

1"use client";
2 
3import { motion, useReducedMotion, type Transition } from "framer-motion";
4import { User } from "lucide-react";
5import { useId, useMemo } from "react";
6 
7type Avatar = {
8  id: number;
9  name: string;
10  handle: string;
11  color: string;
12};
13 
14const avatars: Avatar[] = [
15  {
16    id: 1,
17    name: "Avery Nolan",
18    handle: "@averydesigns",
19    color: "bg-[#4f46e5]",
20  },
21  { id: 2, name: "Lena Ortiz", handle: "@lena_motion", color: "bg-[#10b981]" },
22  { id: 3, name: "Miles Chen", handle: "@mileslabs", color: "bg-[#38bdf8]" },
23  { id: 4, name: "Nia Calder", handle: "@niacalder", color: "bg-[#f97316]" },
24  { id: 5, name: "Theo Sato", handle: "@theosato", color: "bg-[#a855f7]" },
25];
26 
27export function AvatarGroup() {
28  const shouldReduceMotion = useReducedMotion();
29  const groupId = useId();
30 
31  const animationConfig = useMemo(
32    () =>
33      shouldReduceMotion
34        ? {
35            initial: { opacity: 1, x: 0, scale: 1 },
36            animate: { opacity: 1, x: 0, scale: 1 },
37            whileHover: { scale: 1.08, zIndex: 10 },
38            transition: { duration: 0 },
39          }
40        : {
41            initial: (index: number) => ({
42              opacity: 0,
43              x: -12 * index,
44              scale: 0.85,
45            }),
46            animate: { opacity: 1, x: 0, scale: 1 },
47            whileHover: { scale: 1.18, zIndex: 10 },
48            transition: (index: number) => ({
49              delay: 0.08 * index,
50              type: "spring",
51              stiffness: 320,
52              damping: 24,
53              mass: 0.7,
54            }),
55          },
56    [shouldReduceMotion]
57  );
58 
59  return (
60    <section
61      aria-labelledby={`${groupId}-label`}
62      className="relative inline-flex items-center gap-4"
63    >
64      <div
65        aria-hidden
66        className="pointer-events-none absolute -left-4 top-0 h-16 w-16 rounded-full bg-primary/20 blur-[60px]"
67      />
68      <div
69        aria-hidden
70        className="pointer-events-none absolute -right-6 bottom-0 h-14 w-14 rounded-full bg-emerald-400/20 blur-[70px]"
71      />
72 
73      <div
74        role="group"
75        aria-describedby={`${groupId}-description`}
76        className="flex items-center"
77      >
78        <motion.ul className="flex -space-x-3" role="list">
79          {avatars.map((avatar, index) => (
80            <motion.li
81              key={avatar.id}
82              role="listitem"
83              initial={
84                typeof animationConfig.initial === "function"
85// … truncated