Photo Stack

Galleries 246

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Photo Stack to your project and fits it to your theme.

Code

How Photo Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}