---
title: 3d Twisting Gallery
description: A high-performance 3D serpentine twisting gallery column with hardware-accelerated physics, momentum pointer drag, mouse wheel inertia, seeded pseudorandom tile variation, dynamic motion blur, desaturation on velocity, and optional radial edge vignette.
---

<ComponentPreview name="3d-twisting-gallery-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-twisting-gallery
```

*(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-twisting-gallery
```

</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-twisting-gallery
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import ThreeDTwistingGallery, { GalleryImage, ThreeDTwistingGalleryRef } from "@/components/lightswind-pro/twisting-gallery";
```

```tsx
import ThreeDTwistingGallery from "@/components/lightswind-pro/twisting-gallery";

const galleryImages = [
  {
    src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&auto=format&fit=crop&q=80",
    title: "Yosemite Mist",
    tag: "Nature",
  },
  {
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&auto=format&fit=crop&q=80",
    title: "Alpine Ridge",
    tag: "Mountain",
  },
  {
    src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&auto=format&fit=crop&q=80",
    title: "Emerald Cove",
    tag: "Seascape",
  },
];

export function GalleryExample() {
  return (
    <div className="w-full h-[600px] rounded-2xl overflow-hidden bg-zinc-950">
      <ThreeDTwistingGallery
        images={galleryImages}
        infinite={true}
        itemWidth={310}
        aspectRatio={0.8}
        gap={80}
        twistMax={280}
        depth={200}
        sway={0.22}
        autoScroll={28}
        pauseOnHover={true}
      />
    </div>
  );
}
```