Scroll-driven image gallery for React and Tailwind CSS (shadcn/ui): tall photo cards topple like dominoes as you scroll. It is built to reward scrolling: every scroll step knocks the next card over, turning a long collection into a satisfying chain reaction that keeps people moving to the end. Cards lie back in 3D perspective and each swings up flat toward the viewer with a gravity curve and a small bounce, the next starting as the previous passes half-way; scroll back and they fall again in reverse. Idle autoplay, a progress prop to drive it from anywhere, reduced-motion fallback, no dependencies. Use it for lookbooks, fashion and editorial galleries, campaign pages and portfolios.
"use client";
import { DominoGallery } from "@/components/ui/domino-gallery";
import type { DominoItem } from "@/components/ui/domino-gallery";
const settings = {
autoplay: true,
standAngle: 94,
cardWidth: 220,
cardHeight: 590,
};
const PHOTOS = [
{ id: "photo-1662532577856-e8ee8b138a8b", title: "Linen & light" },
{ id: "photo-1715541448446-3369e1cc0ee9", title: "Studio noir" },
{ id: "photo-1515886657613-9f3515b0c78f", title: "Crosswalk" },
{ id: "photo-1580478491436-fd6a937acc9e", title: "Red thread" },
{ id: "photo-1768696083080-15d4218ce844", title: "Soft focus" }
];
const ITEMS: DominoItem[] = PHOTOS.map(({ id, title }) => ({
src: `https://images.unsplash.com/${id}?w=440&h=1180&fit=crop&q=80&auto=format`,
alt: title,
title,
}));
const CCGATHER_URL = "https://ccgather.com/?utm_source=21st&utm_medium=component&utm_campaign=domino_gallery";
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="w-full bg-background text-foreground">
<header className="mx-auto flex max-w-3xl flex-col items-center gap-2 px-6 pt-16 pb-6 text-center">
<h2 className="text-lg font-semibold">Scroll to topple</h2>
<p className="text-sm text-muted-foreground">Cards stand like dominoes and fall one after another as you scroll; scroll back up and they rise.</p>
</header>
<DominoGallery items={ITEMS} autoplay={s.autoplay} standAngle={s.standAngle} cardWidth={s.cardWidth} cardHeight={s.cardHeight} />
<footer className="mx-auto max-w-3xl px-6 pb-16 pt-6 text-center text-xs text-muted-foreground">
Fashion gallery from the{" "}
<a href={CCGATHER_URL} target="_blank" rel="noreferrer" className="underline underline-offset-4 transition-colors hover:text-foreground">
CCgather
</a>{" "}
team
</footer>
</div>
);
}