Avatar Circles

AvatarCircles Component

AvatarCircles is a modern and interactive UI component designed for displaying avatars in a circular layout with hover effects. Ideal for team sections, profile showcases, or social media highlights, it enhances user experience with smooth animations powered by Framer Motion.

Features

• Smooth Hover Effects: Avatars subtly lift when hovered.

• Dynamic Hover Details: Displays name and position with a fade-in animation.

• Framer Motion Animations: Ensures seamless transitions and interactivity.

• Fully Responsive: Works across different screen sizes and layouts.

Usage

import AvatarCircles from "@/components/AvatarCircles";
 
const avatars = [
  { imageUrl: "/images/user1.jpg", name: "John Doe", position: "Designer" },
  { imageUrl: "/images/user2.jpg", name: "Jane Smith", position: "Developer" },
];
 
export default function Example() {
  return <AvatarCircles avatarUrls={avatars} />;
}

This component seamlessly integrates into any Next.js or React project, providing an elegant way to present team members or user profiles.