Arc Scroll: Default

"use client";

import * as React from "react";

import { ArcScroll } from "@/components/ui/arc-scroll";

const cards = [
  { title: "Ease in", gradient: "from-rose-400 to-orange-300" },
  { title: "Overshoot", gradient: "from-amber-300 to-lime-300" },
  { title: "Settle", gradient: "from-emerald-400 to-teal-300" },
  { title: "Stagger", gradient: "from-cyan-400 to-sky-300" },
  { title: "Spring", gradient: "from-blue-500 to-indigo-400" },
  { title: "Follow", gradient: "from-violet-500 to-fuchsia-400" },
  { title: "Anticipate", gradient: "from-fuchsia-500 to-pink-400" },
  { title: "Release", gradient: "from-zinc-700 to-zinc-500" },
];

export function ArcScrollDemo() {
  const scrollRef = React.useRef<HTMLDivElement>(null);

  return (
    <div className="relative w-full overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
      <div ref={scrollRef} className="relative h-[var(--demo-height,30rem)] overflow-y-auto overscroll-contain">
        <ArcScroll containerRef={scrollRef} stageClassName="h-[var(--demo-height,30rem)]" scrollPerCard={240}>
          {cards.map((card, index) => (
            <div
              key={card.title}
              className={`flex h-56 w-40 flex-col justify-between rounded-2xl bg-linear-to-br p-4 text-white shadow-xl shadow-zinc-900/15 ring-1 ring-black/5 dark:shadow-black/50 dark:ring-white/10 ${card.gradient}`}
            >
              <span className="font-mono text-xs opacity-80">
                {String(index + 1).padStart(2, "0")}
              </span>
              <span className="text-lg font-semibold tracking-tight">{card.title}</span>
            </div>
          ))}
        </ArcScroll>
      </div>
      <p className="pointer-events-none absolute inset-x-0 bottom-4 text-center font-mono text-xs uppercase tracking-widest text-zinc-500">
        Scroll inside the box
      </p>
    </div>
  );
}