Avatar List

@keyframes bg-position {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

mkdir -p components/animata/list && touch components/animata/list/avatar-list.tsx

import { cn } from "@/lib/utils";
 
const data = [
  {
    name: "John Doe",
    position: "Software Engineer",
    image:
      "https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    name: "Jane Smith",
    position: "Product Manager",
    image:
      "https://images.unsplash.com/photo-1582610285985-a42d9193f2fd?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    name: "David Johnson",
    position: "UX Designer",
    image:
      "https://images.unsplash.com/photo-1530268729831-4b0b9e170218?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    name: "Emily Davis",
    position: "Frontend Developer",
    image:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    name: "Michael Wilson",
    position: "Backend Developer",
    image:
      "https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    name: "Sarah Thompson",
    position: "Data Scientist",
    image:
      "https://images.unsplash.com/photo-1573496799515-eebbb63814f2?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
];
 
interface AvatarData {
  name: string;
  position: string;
  image: string;
}
 
export default function AvatarList({
  size = "md",
  className,
  items,
}: {
  size?: "sm" | "md" | "lg";
  className?: string;
  items?: AvatarData[];
}) {
  const avatars = items ?? data;
  const sizes: Record<"sm" | "md" | "lg", string> = {
    lg: "m-3 size-6",
    md: "m-2 size-12",
    sm: "m-1 size-8",
  };
 
  return (
    <div className={cn("flex py-12", className)}>
      {avatars.map((item, index) => (
        <div
          key={`${item.name}-${index}`}
          className={cn(
            "group/avatar relative z-0 flex scale-100 items-center transition duration-200 ease-in-out hover:z-10 hover:scale-110",
            index > 0 && "-ml-3",
          )}
        >
          <div className="relative overflow-hidden rounded-full bg-white">
            <div className="bg-size pointer-events-none absolute h-full w-full animate-bg-position from-violet-500 from-30% via-cyan-400 via-50% to-pink-500 to-80% bg-[length:300%_auto] opacity-15 group-hover/avatar:bg-linear-to-r" />
            <div className="z-1 blur-lg" />
            <img
              src={item.image}
              alt={item.name}
              className={cn("rounded-full object-cover", sizes[size] ?? sizes.md)}
            />
          </div>
          <div className="absolute bottom-full left-1/2 -translate-x-1/2 translate-y-2 transform whitespace-nowrap rounded bg-slate-900 p-2 text-white opacity-0 transition duration-300 ease-in-out group-hover/avatar:-translate-y-2 group-hover/avatar:opacity-100 dark:bg-slate-100 dark:text-slate-900">
            <div className="text-sm font-semibold">{item.name}</div>
            <div className="text-sm">{item.position}</div>
          </div>
        </div>
      ))}
    </div>
  );
}