Perspective Scroll Showcase

Cards 51

About

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.

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

Code

How Perspective Scroll Showcase is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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