# Arc Scroll: Default

> Eight cards on an arc, driven by scrolling inside the box.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/arc-scroll-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/arc-scroll-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/arc-scroll-demo-light-d7272ef9ab614f38.png
- Registry item: https://keyframeui.com/r/arc-scroll-demo.json
- Categories: scroll, cards, motion
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/arc-scroll-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/arc-scroll.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/arc-scroll#arc-scroll-demo

## Files

### `registry/demos/arc-scroll-demo.tsx`

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