Animated Avatar Group

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6 
7export type AvatarData = {
8  src: string;
9  alt: string;
10  href?: string;
11};
12 
13export type AnimatedAvatarGroupProps = {
14  avatars: AvatarData[];
15  maxVisible?: number;
16  size?: number;
17  overlap?: number;
18  className?: string;
19  expandOnHover?: boolean;
20};
21 
22const AnimatedAvatarGroup = ({
23  avatars,
24  maxVisible = 4,
25  size = 40,
26  overlap = 0.3,
27  className,
28  expandOnHover = true,
29}: AnimatedAvatarGroupProps) => {
30  const shouldReduceMotion = useReducedMotion();
31  const [isHovered, setIsHovered] = useState(false);
32  const [isHoverDevice, setIsHoverDevice] = useState(false);
33 
34  useEffect(() => {
35    const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
36    setIsHoverDevice(mediaQuery.matches);
37 
38    const handleChange = (event: MediaQueryListEvent) => {
39      setIsHoverDevice(event.matches);
40    };
41 
42    mediaQuery.addEventListener("change", handleChange);
43    return () => {
44      mediaQuery.removeEventListener("change", handleChange);
45    };
46  }, []);
47 
48  const visibleAvatars = avatars.slice(0, maxVisible);
49  const hiddenCount = avatars.length - maxVisible;
50  const hasHiddenAvatars = hiddenCount > 0;
51 
52  const overlapPx = size * overlap;
53  const expanded = expandOnHover && isHoverDevice && isHovered;
54 
55  const springTransition = shouldReduceMotion
56    ? { duration: 0 }
57    : { bounce: 0.1, duration: 0.25, type: "spring" as const };
58 
59  return (
60    <motion.div
61      aria-label="Avatar group"
62      className={cn("flex items-center", className)}
63      onMouseEnter={() => setIsHovered(true)}
64      onMouseLeave={() => setIsHovered(false)}
65      role="group"
66    >
67      {visibleAvatars.map((avatar, index) => {
68        const marginLeft = index === 0 ? 0 : expanded ? 4 : -overlapPx;
69 
70        const content = (
71          <motion.img
72            alt={avatar.alt}
73            animate={
74              shouldReduceMotion
75                ? { opacity: 1 }
76                : {
77                    opacity: 1,
78                    scale: expanded ? 1.05 : 1,
79                  }
80            }
81            className="rounded-full object-cover"
82            draggable={false}
83            height={size}
84            initial={
85              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
86            }
87            src={avatar.src}
88            style={{
89              height: size,
90              width: size,
91// … truncated