A helical, auto-scrolling image gallery where photo cards recycle through depth with previous/next controls, a pause toggle, and numbered jump buttons.
"use client";
import InfiniteSpiral from "@/components/ui/infinite-spiral";
const items = [
{
id: "1",
src: "https://cdn.21st.dev/assets/mirror/7d/7d8de5934993ac6ab57cf8b7ef2c06c658677b6493ad24e894f831b08f64980d.jpg",
alt: "Mountain range at dawn",
title: "Alpine dawn",
},
{
id: "2",
src: "https://cdn.21st.dev/assets/mirror/bd/bdd8b88267434941802099d2bde330f871b4e127ebbf36b638d2df810240570f.jpg",
alt: "Desert dunes at sunset",
title: "Desert light",
},
{
id: "3",
src: "https://cdn.21st.dev/assets/mirror/03/031a853638554a80df00045ebb42d0d41d792394371c014adae48d170f5eca78.jpg",
alt: "Forest canopy from below",
title: "Forest canopy",
},
{
id: "4",
src: "https://cdn.21st.dev/assets/mirror/27/2748344136ec53099cff3fcb49af33d00434a7089a86975811e03f4c09e99b23.jpg",
alt: "Ocean waves crashing",
title: "Ocean waves",
},
{
id: "5",
src: "https://cdn.21st.dev/assets/mirror/f8/f8b3b08ef46eadfb1c9696a816c723389b3c43d701d0b546cdf0e43e2c980625.jpg",
alt: "Snowy mountain peak",
title: "Snowy peak",
},
{
id: "6",
src: "https://cdn.21st.dev/assets/mirror/69/6958b26a3629c3f18383e29c2ff80576a6537b0ab4c48a60df19e0b1afa5b6dd.jpg",
alt: "Rolling green hills",
title: "Rolling hills",
},
];
export default function InfiniteSpiralDemo() {
return (
<div className="flex w-full items-center justify-center p-8">
<div className="w-full max-w-md">
<InfiniteSpiral items={items} />
</div>
</div>
);
}