Turn any set of images into a rotating 3D ring that visitors can grab and spin.
Cards orbit in real perspective space with depth-aware fading and scaling, so the ones at the back sit naturally behind the ones in front. Drag to spin it yourself, with momentum that eases out the way you would expect.
Built to stay easy Ring sizing is automatic. Add or remove images and the spacing recalculates itself, so cards never overlap no matter how many you drop in. Switch to manual only when you want an unusually tight or wide ring.
Controls
Auto radius or manual ring size, with a spread multiplier
Tilt and perspective for anything from a flat turntable to a straight-on carousel
Cards can rotate with the ring or always face the viewer
Auto rotate with speed, direction, and pause on hover
Drag to spin, with momentum
Depth fade and depth scale for the sense of distance
Shadow with custom color, plus corner radius
Bleed or clip the ring at the frame edge
Center slot for a logo, heading, or any layer
Click event handler for linking cards
Respects reduced motion preferences, pauses when scrolled out of view, and runs its animation without React re-renders.
Turn any set of images into a rotating 3D ring that visitors can grab and spin.
Cards orbit in real perspective space with depth-aware fading and scaling, so the ones at the back sit naturally behind the ones in front. Drag to spin it yourself, with momentum that eases out the way you would expect.
Built to stay easy Ring sizing is automatic. Add or remove images and the spacing recalculates itself, so cards never overlap no matter how many you drop in. Switch to manual only when you want an unusually tight or wide ring.
Controls
Auto radius or manual ring size, with a spread multiplier
Tilt and perspective for anything from a flat turntable to a straight-on carousel
Cards can rotate with the ring or always face the viewer
Auto rotate with speed, direction, and pause on hover
Drag to spin, with momentum
Depth fade and depth scale for the sense of distance
Shadow with custom color, plus corner radius
Bleed or clip the ring at the frame edge
Center slot for a logo, heading, or any layer
Click event handler for linking cards
Respects reduced motion preferences, pauses when scrolled out of view, and runs its animation without React re-renders.
