Scroll Gallery

Galleries 200

About

A full-viewport sticky scroll slider that pins to the screen and wipes between full-bleed images with an animated title swap as the user scrolls.

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

Code

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

Usage.tsx

"use client";

import { ScrollGallery } from "@/components/ui/scroll-gallery";

const slides = [
  {
    title: "Room 14B",
    image:
      "https://cdn.21st.dev/assets/localized/422a9d079a86d6b410b41fbb0090427811811c3ae4a155b10f8d15a3c0a58a28.webp",
    url: "#",
  },
  {
    title: "Subject Identified",
    image:
      "https://cdn.21st.dev/assets/localized/999a6f1ea688f9a5773a2c87a1b0bba9ab1883540bb8c076cc05f0bbd020e8f5.webp",
    url: "#",
  },
  {
    title: "Dossier 09",
    image:
      "https://cdn.21st.dev/assets/localized/3be3b5cf7b711fac32e9ac2f8d9f3376257351fd892080d24efb9b6d76f6e4b6.webp",
    url: "#",
  },
  {
    title: "Stairwell C7",
    image:
      "https://cdn.21st.dev/assets/localized/70740344cc7e98e830662f223995a973464ddb53d449e1da1ec28aca1a205c55.webp",
    url: "#",
  },
];

export default function ScrollGalleryDemo() {
  return (
    <div className="w-full h-screen">
      <ScrollGallery slides={slides} variant="studio" />
    </div>
  );
}