Arc Carousel
A high-performance 3-D carousel that rotates items in a circular arc with smooth physics and responsive behavior.
Examples
With Content
Phantom Black
Phantom Black is a premium matte black finish that gives the car a stealthy and aggressive look.
Open Road
Get ready to experience the thrill of the open road with our latest collection.
Midnight Run
Experience the thrill of the night with our latest collection.
Drift Study
Experience the thrill of the drift with our latest collection.
Carbon Edge
Experience the thrill of the edge with our latest collection.
Pump Noir
Experience the thrill of the noir with our latest collection.
Silver Ghost
Experience the thrill of the ghost with our latest collection.
Raw Form
Experience the thrill of the raw with our latest collection.
Circuit Noir
Experience the thrill of the circuit with our latest collection.
Phantom Black
Installation
$ npx shadcn@latest add https://akshitr.com/r/arc-carousel.json
Usage
import ArcCarousel from "@/components/arc-carousel";
export default function ArcCarouselDemo() {
return <ArcCarousel />;
}Component API
ArcCarousel
| Prop | Type | Default | Description |
|---|---|---|---|
| slides? | CarouselSlide[] | See ARC_CAROUSEL_DEFAULTS | Array of slide data. Works best with 5–9 slides. |
| enableSound? | boolean | false | Enable sound effects for the carousel. |
| className? | string | — | Additional classes applied to the root section. |
CarouselSlide
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Card title. Rendered as the active label below. |
| content | ReactNode | — | Content to be displayed on the card. |
| className | string | — | Tailwind gradient or background class applied to the card face. |
| src | string | — | Optional image URL. When provided, renders an <img> instead of the gradient. |
Use Cases
- Featured Product or Case Study Highlights: Showcase flagship apps, portfolio projects, or hardware devices with circular depth.
- Creative Portfolio Galleries: Present photography series, cover artwork, or 3D renders with tactile spatial rotation.
- Onboarding & Feature Walkthroughs: Engage users in a step-by-step introduction where cards curve inward around the focus.
- Interactive Storytelling: Deliver visual narratives or chronological project milestones in landing pages.
