Made UI avatar animations https://x.com/Alexanderolssen/status/1830593002559193496

Avatar-animation.tsx

import { useState } from 'react'
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

type TeamMember = {
  id: number
  name: string
  imageUrl: string
  description: string
}

const teamMembers: TeamMember[] = [
  {
    id: 1,
    name: "qJohn",
    imageUrl: "https://avatars.githubusercontent.com/u/8038593?v=4",
    description: "Loves video games, boxing and heavy metal"
  },
  {
    id: 2,
    name: "Sarah",
    imageUrl: "https://avatars.githubusercontent.com/u/8038593?v=4",
    description: "Passionate about design and photography"
  },
  {
    id: 3,
    name: "Mike",
    imageUrl: "https://avatars.githubusercontent.com/u/8038593?v=4",
    description: "Enjoys coding and solving puzzles"
  },
  {
    id: 4,
    name: "Emily",
    imageUrl: "https://avatars.githubusercontent.com/u/8038593?v=4",
    description: "Expert in digital marketing and SEO"
  },
  {
    id: 5,
    name: "Alex",
    imageUrl: "https://avatars.githubusercontent.com/u/8038593?v=4",
    description: "Specializes in user experience and interface design"
  }
]

export default function TeamShowcase() {
  const [hoveredId, setHoveredId] = useState<number | null>(null)

  return (
    <div className="p-8 bg-gray-50 max-w-3xl mx-auto">
      <div className="mb-6 h-16 flex items-center justify-center">
        {hoveredId !== null && (
          <h2 className="text-2xl font-bold text-gray-800 text-center transition-opacity duration-100">
            {teamMembers.find(member => member.id === hoveredId)?.description}
          </h2>
        )}
      </div>
      <div className="flex justify-center items-end -space-x-4 mb-8">
        {teamMembers.map((member) => (
          <div
            key={member.id}
            className={`relative group transition-all duration-300 ease-in-out
              
              ${hoveredId === member.id
                ? ''
                : hoveredId === null
                  ? '-ml-4 first:ml-0'
                  : hoveredId < member.id
                    ? 'translate-x-8'
                    : '-translate-x-8'
              }
              
              `}
            onMouseEnter={() => setHoveredId(member.id)}
            onMouseLeave={() => setHoveredId(null)}
          >
            <Avatar className={`w-20 h-20 transition-all border-2 border-gray-300 duration-300 rounded-md
                ${hoveredId === member.id ? 'scale-150 z-10' : ''}
              `}>
              <AvatarImage src={member.imageUrl} alt={member.name} />
            </Avatar>
          </div>
        ))}
      </div>
      <div className="text-center">
        <h3 className="text-xl font-semibold mb-2 text-gray-800">We craft modern,</h3>
        <h3 className="text-xl font-semibold mb-2 text-gray-800">scalable and functional</h3>
      </div>
    </div>
  )
}