Circular Gallery
Media & Content
A 3D circular/orbital image carousel with drag and scroll navigation. Items are arranged in a curved arc with perspective-based scaling, fading, and smooth momentum deceleration.
Loading preview...
Customize
Radius600
Item Width280
Item Height200
Scroll Speed2
Border Radius12
Text Color
#ffffff
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<{ image: string; text: string }> | 8 gradient placeholders | Gallery items with image URL (or CSS gradient) and label text. |
radius | number | 600 | Radius of the circular arrangement in pixels. |
itemWidth | number | 280 | Width of each image card in pixels. |
itemHeight | number | 200 | Height of each image card in pixels. |
scrollSpeed | number | 2 | Drag and scroll sensitivity multiplier. |
textColor | string | '#ffffff' | Color of the label text below each card. |
borderRadius | number | 12 | Border radius of each card in pixels. |
className | string | '' | Additional CSS classes for the container. |