Circular Gallery
A curved coverflow band you drag and throw; it bends along an arc and loops forever.
motiondrag3D
Customize
Layout
Card width200px
Card height260px
Spacing44px
Corner radius20px
Curve
Bend42°
Rotation of the edge cards toward the viewer.
Arc depth46px
Edge scale0.62
Edge fade0.55
Motion
Auto-rotate18px/s
0 stops; negative reverses.
Throw friction0.92
Snap to card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CircularGalleryItem[] | gradient set | Cards along the arc ({ title, subtitle?, background? }). |
itemWidth | number | 200 | Card width in pixels. |
itemHeight | number | 260 | Card height in pixels. |
gap | number | 44 | Extra spacing between card centers, in pixels. |
bend | number | 42 | Max rotation of edge cards toward the viewer, in degrees. |
arc | number | 46 | How far edge cards dip down the arc, in pixels. |
minScale | number | 0.62 | Scale of the outermost cards (center is 1). |
fade | number | 0.55 | How much edge cards fade (0–1). |
autoScroll | number | 18 | Idle auto-rotation speed in px/s (0 disables; negative reverses). |
friction | number | 0.92 | Inertia decay per frame after a drag (0.8–0.98). |
snap | boolean | false | Snap to the nearest card when a drag ends. |
radius | number | 20 | Card corner radius in pixels. |
label | string | "Circular gallery" | Accessible name for the gallery region. |