---
title: 3d Rotating Carousel
description: An advanced, high-performance 3D cylindrical rotating carousel featuring smooth momentum drag physics, delta-time auto-orbit, mouse wheel rotation, ambient ground reflection, and full touch support.
---

<ComponentPreview name="3d-rotating-carousel-demo" />

## Premium Pro Component

This is a premium Pro component. To get access to its source code and advanced interactive configurations:
1. Visit the pricing page: [https://lightswind.com/pricing](https://lightswind.com/pricing)
2. Purchase a license to unlock this component.

If you have already purchased a license, you can install this component directly via our CLI:

```bash
npx lightswind@latest add 3d-rotating-carousel
```

*(Note: Make sure you have configured your API key in your project to authenticate your Pro license).*

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add 3d-rotating-carousel
```

</TabsContent>

<TabsContent value="manual">

> [!IMPORTANT]
> This is a premium component. Manual copy-paste source code is only available to Pro license holders.
> Please purchase a plan at [https://lightswind.com/pricing](https://lightswind.com/pricing) to unlock manual access, or use the authenticated CLI command:
> 
> ```bash
> npx lightswind@latest add 3d-rotating-carousel
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import { ThreeDRotatingCarousel } from "@/components/lightswind-pro/3d-rotating-carousel";
```

```tsx
import { ThreeDRotatingCarousel } from "@/components/lightswind-pro/3d-rotating-carousel";

const CARDS = [
  {
    title: "Cyber Horizon",
    subtitle: "Synthetic Grid",
    tag: "Spatial 3D",
    image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=600&auto=format&fit=crop&q=80",
  },
  {
    title: "Neon Nexus",
    subtitle: "Core Vector",
    tag: "WebGL",
    image: "https://images.unsplash.com/photo-1634412425230-9a85b926e482?w=600&auto=format&fit=crop&q=80",
  },
  {
    title: "Quantum Drift",
    subtitle: "Photon Field",
    tag: "Interactive",
    image: "https://images.unsplash.com/photo-1604281017721-1aeee9df3d39?w=600&auto=format&fit=crop&q=80",
  },
];

export default function App() {
  return (
    <div className="w-full py-12 flex justify-center">
      <ThreeDRotatingCarousel
        cards={CARDS}
        radius={340}
        duration={24}
        draggable={true}
        mouseWheel={true}
        showReflection={true}
      />
    </div>
  );
}
```