Arc Deck

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/arc-deck.tsx.

Install the pastetaste component "Arc Deck" (arc-deck) into this Next.js project and use it.

What it is: Slides fanned along a vertical arc that rotates with scroll, drag or arrow keys so each slide sweeps through the centre. Pointer drive, or hand it the page's own scrolling.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/arc-deck.json
   (it writes components/pastetaste/arc-deck.tsx; install any npm packages it reports).
2. Import it: import { ArcDeck } from "@/components/pastetaste/arc-deck" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- slides: { label: string; image?: string; content?: ReactNode }[] = six typographic sheets — The slides: a label for screen readers and an image or custom content.
- drive: 'pointer' | 'scroll' = 'pointer' — pointer: wheel, drag, flick and keys. scroll: the component becomes a tall track with a sticky stage and the page's scrolling turns the arc.
- aspect: number = 1.6 — Slide width over height.
- curve: number = 1 — Arc radius as a multiple of the container height; smaller is a tighter curve.
- reach: number = 3.3 — Slides visible either side of the middle before they fade out.
- lean: number = 4 — How far slides turn around their vertical axis along the arc, in degrees per slide.
- loop: boolean = true — Wrap around endlessly (pointer drive).
- wheel: boolean = true — Turn the arc with the mouse wheel (pointer drive); the wheel then does not scroll the page while the pointer is over the deck.
- autoplay: number = 0 — Slow drift in slides per second (pointer drive); 0 turns it off. It holds on hover, focus and while hidden, and a Pause button appears.
- scrollPerSlide: number = 0.7 — Length of the scroll track in viewport heights per slide (scroll drive).
- onActiveChange: (index: number) => void — Called when the slide in the middle changes.
- accent: string = var(--pt-accent, #ff4b2b) — Colour of the focus ring.
- label: string = 'Slides on an arc' — Accessible name of the carousel.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root; in pointer drive it needs a height from its parent or from this prop.

Live preview: https://pastetaste.com/c/arc-deck
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 15