Animated Photo Stack A playful, layered card component that displays team or profile photos in a stacked, draggable style with smooth animations. Perfect for showcasing creative teams, communities, or social highlights in an engaging way.
import {
InteractivePhotoStack,
PhotoStackItem,
} from "@/components/ui/photo-stack";
// Sample data for the demo, matching the new PhotoStackItem interface
const showcaseItems: PhotoStackItem[] = [
{
src: "https://cdn.21st.dev/assets/mirror/e4/e4aa6feebdf90e8f95fd1b23df1134252323f1a8431bacf6cce347a6872a36b1.jpg",
name: "Alexandre",
},
{
src: "https://cdn.21st.dev/assets/mirror/69/692aaa4baf3ba986e5c0b072133ecaac13933a3b1c6a99c78bea3d8a47f9dee8.jpg",
name: "Isabella",
},
{
src: "https://cdn.21st.dev/assets/mirror/b2/b226346ec34fe24bbe9082488ff7f2c84d7150de914648cac41eeabe17579811.jpg",
name: "Sophia",
},
{
src: "https://cdn.21st.dev/assets/mirror/e8/e87dd9c3d7e7c987901cef2bcca30db0157a1b51824e8628ccbfb27637ab9902.jpg",
name: "Mia",
},
{
src: "https://cdn.21st.dev/assets/mirror/fb/fb1f483387b6207cca218e17983266d323e2c4b77cdfb689a697e465e659ad96.jpg",
name: "Charlotte",
},
];
// Demo component to showcase the photo stack
export default function InteractivePhotoStackDemo() {
return (
<div className="flex h-full min-h-[45rem] w-full items-center justify-center bg-background p-8">
<InteractivePhotoStack
items={showcaseItems}
title={
<>
Our Creative Team
</>
}
/>
</div>
);
}