A highly immersive 3D scrolling showcase that flips between fullscreen project cards as you scroll, featuring a dynamic, infinite advertising marquee background that reacts to the scroll depth.
import PerspectiveScrollShowcase from "../components/ui/perspective-scroll-showcase";
const dummyProjects = [
{
title: "AI Gift Finder",
tags: ["AI", "UX research", "App design"],
bgText: "AI GIFT FINDER • AI GIFT FINDER • AI GIFT FINDER • AI GIFT FINDER •",
src: "https://cdn.21st.dev/assets/mirror/45/45d1d57d09900d34a57ecb25f336d2583668504f90e0649ba6795fbc405c98b1.jpg",
},
{
title: "Eco Dashboard",
tags: ["SaaS", "Dashboard", "Web"],
bgText: "ECO DASHBOARD • ECO DASHBOARD • ECO DASHBOARD • ECO DASHBOARD •",
src: "https://cdn.21st.dev/assets/mirror/af/afc927f132c367d490f448690486132f98db3b28205617716d7d5a4c60a7d7d2.jpg",
},
{
title: "IQuality",
tags: ["Branding", "UI/UX", "Mobile"],
bgText: "IQUALITY MOBILE • IQUALITY MOBILE • IQUALITY MOBILE • IQUALITY MOBILE •",
src: "https://cdn.21st.dev/assets/mirror/ef/efbff6a28820beb9435a1058e236a408ac95f79a5f85a450c0b051be7773d3a4.jpg",
},
{
title: "Urban Architecture",
tags: ["Photography", "City", "Modern"],
bgText: "URBAN ARCHITECTURE • URBAN ARCHITECTURE • URBAN ARCHITECTURE • URBAN ARCHITECTURE •",
src: "https://cdn.21st.dev/assets/mirror/bc/bc29cf42a0d8313d7008c0e35460a52905973799f1b7a4904b98e1973e49433b.jpg",
},
{
title: "Neon Nights",
tags: ["Cyberpunk", "Neon", "Dark"],
bgText: "NEON NIGHTS • NEON NIGHTS • NEON NIGHTS • NEON NIGHTS •",
src: "https://cdn.21st.dev/assets/mirror/7d/7d85215aeccaad65f4d19898950fc2d9ec6932e098c4ff5d3d6eb7850e15cf2c.jpg",
},
];
export default function App() {
return (
<div className="w-full min-h-screen overflow-x-clip transition-colors duration-500 bg-white dark:bg-black text-black dark:text-white font-sans antialiased">
{/* Top Filler Content */}
<div className="h-[50vh] flex items-center justify-center border-b transition-colors duration-500 border-black/5 dark:border-white/10">
<h1 className="text-4xl text-black/50 dark:text-white/50">
Scroll down to see the magic ✨
</h1>
</div>
{/* Main Component */}
<PerspectiveScrollShowcase projects={dummyProjects} />
{/* Bottom Filler Content */}
<div className="h-screen flex flex-col items-center justify-center border-t transition-colors duration-500 bg-gray-100 dark:bg-zinc-950 border-black/5 dark:border-white/10">
<h1 className="text-2xl mb-4 text-black/50 dark:text-white/50">
You have reached the bottom
</h1>
<p className="text-lg text-black/30 dark:text-white/30">
Add more components here
</p>
</div>
</div>
);
}