Rolling Gallery
Cards mounted on a spinning 3D cylinder — drag to roll it, hover to pause.
motiondrag3D
Customize
Ring
Face width190px
Face height250px
Face spacing0.18
Fraction of the radius added between faces.
Tilt6°
Perspective1100px
Motion
Spin speed22°/s
0 stops; negative reverses.
Drag sensitivity0.22°/px
Throw friction0.94
Pause on hover
Style
Dim back faces
Corner radius18px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | RollingGalleryItem[] | gradient set | Faces around the cylinder ({ title, subtitle?, background? }). |
faceWidth | number | 190 | Face width in pixels. |
faceHeight | number | 250 | Face height in pixels. |
spacing | number | 0.18 | Extra spacing between faces, as a fraction of the radius. |
speed | number | 22 | Auto-spin speed in °/s (0 disables; negative reverses). |
sensitivity | number | 0.22 | Degrees of spin per pixel of horizontal drag. |
friction | number | 0.94 | Inertia decay per frame after a drag (0.8–0.98). |
pauseOnHover | boolean | true | Pause the auto-spin while the pointer is over the ring. |
tilt | number | 6 | Forward tilt of the whole cylinder, in degrees. |
perspective | number | 1100 | Scene perspective in pixels (smaller = stronger 3D). |
dim | boolean | true | Dim faces as they rotate to the back. |
radius | number | 18 | Face corner radius in pixels. |
label | string | "Rolling gallery" | Accessible name for the gallery region. |