Infinite Spiral Gallery

Galleries

About

A helical, auto-scrolling image gallery where photo cards recycle through depth with previous/next controls, a pause toggle, and numbered jump buttons.

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

Code

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

Usage.tsx

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