Animated Image Showcase This component displays a title, subtitle, and a fanned-out stack of images. On hover, the images gracefully spread out and scale up, creating an engaging user experience. It's fully responsive and theme-adaptive.
// demo.tsx
import * as React from "react";
import { PhotoStackCard } from "@/components/ui/image-showcase";
// --- DEMO DATA ---
const memoriesData = [
{
images: [
"https://cdn.21st.dev/assets/mirror/89/895147e2a8a4ce73269b083530e5d37affd0643b4205dcc2203aec85b8fd4843.jpg",
"https://cdn.21st.dev/assets/mirror/62/6233a1d2db5b9556fd2e8acbf9941f93781295d6de1bf9365184ec6b430bf2e9.jpg",
"https://cdn.21st.dev/assets/mirror/33/3317c3e478b50a44ae6d8d639da282e4d1ced334f3b8cd7d2492613e5a5b6c9c.jpg",
],
category: "TRAVEL",
title: "Black Sea",
subtitle: "June 2023",
},
{
images: [
"https://cdn.21st.dev/assets/mirror/40/4039f60485eef469d7bd8489b89dfdbe2696544cc7f034c333826539cd9938f3.jpg",
"https://cdn.21st.dev/assets/mirror/61/61323420d13886ca1c49e9be654268bea986790223a8af2a41b24cbbcfff3ecb.jpg",
"https://cdn.21st.dev/assets/mirror/b8/b8f88ed1fe79ceee93eab2e53d60a0dfda6ef129524b72f5419a61791c86535d.jpg",
],
category: "ADVENTURE",
title: "Alps",
subtitle: "January 2024",
},
{
images: [
"https://cdn.21st.dev/assets/mirror/24/246fe7e5c10456561a7b86d63bafe431f8877dc9ad71341b61900579e08f59cd.jpg",
"https://cdn.21st.dev/assets/mirror/8e/8e81c8c6f3fa71af3402ec84a8e9f98237461c94d825c170f64e2957d8926b86.jpg",
"https://cdn.21st.dev/assets/mirror/56/567e2dbf984c4f3c2c37c9275627b31a3a1bebf05f01510c903e044812c97473.jpg",
],
category: "RELAXATION",
title: "Maldives",
subtitle: "August 2022",
},
];
// --- DEMO COMPONENT ---
export default function PhotoStackCardDemo() {
const [activeIndex, setActiveIndex] = React.useState<number | null>(1); // Default to the middle card
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<div className="relative flex h-72 w-full max-w-3xl items-center justify-center">
{memoriesData.map((mem, index) => (
<div
key={mem.title}
className="absolute"
style={{
// Position cards to overlap for a better visual effect
transform: `translateX(${(index - 1) * 200}px)`,
}}
>
<PhotoStackCard
{...mem}
isActive={index === activeIndex}
onClick={() => setActiveIndex(index)}
/>
</div>
))}
</div>
</div>
);
}