Infinite Circular Scroll

Cards 8

About

A vertical list of cards that loops seamlessly as you scroll, with the scrollbar hidden for a continuous circular feel.

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

Code

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

Usage.tsx

"use client";

import { InfiniteCircularScroll } from "@/components/ui/infinite-circular-scroll";

export default function Default() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-8">
      <InfiniteCircularScroll
        itemHeight={56}
        className="w-72 rounded-lg border border-border"
      >
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
          <div
            key={i}
            className="flex w-full items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2"
          >
            <span className="font-mono font-bold">{i}</span>
            <span className="text-sm text-muted-foreground">Card {i}</span>
          </div>
        ))}
      </InfiniteCircularScroll>
    </div>
  );
}