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