3d Image Ring
A 3D image gallery projected as a ring / hemisphere that can be dragged to rotate, auto-rotates, and keeps its momentum.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A set of images arranged at equal angles into a three-dimensional drum: drag with the pointer to rotate it, release and the momentum carries on, with automatic rotation and depth dimming for the panels facing away. Implemented with pure CSS 3D transforms, with no dependency on WebGL.
npx shadcn@latest add "https://webberui.com/r/3d-image-ring.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<3dImageRing />
Installation
npx shadcn@latest add "https://webberui.com/r/3d-image-ring.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/3d-image-ring.
Usage
The content of each entry in items can be any node — an image, a card, or a gradient. The example below uses gradients as stand-in images:
import { ThreeDImageRing } from "@/components/ui/3d-image-ring";
const items = Array.from({ length: 8 }, (_, i) => ({
id: i,
label: `Slide ${i + 1}`,
content: (
<div
className="h-full w-full"
style={{ background: "linear-gradient(150deg, #6366f1, #22d3ee)" }}
/>
),
}));
<ThreeDImageRing items={items} itemWidth={180} itemHeight={240} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ThreeDImageRingItem[] | — | Panels on the ring, each with id, content, and label |
itemWidth | number | 200 | Panel width (px) |
itemHeight | number | 260 | Panel height (px) |
radius | number | automatic | Ring radius (px); computed from the panel width and count when omitted |
perspective | number | 1600 | CSS perspective distance (px); smaller values exaggerate the perspective |
tilt | number | 8 | Stage tilt angle (deg), giving a hemispherical look from above |
autoRotate | boolean | true | Whether to rotate automatically |
autoRotateSpeed | number | 10 | Automatic rotation speed (degrees/second) |
dragSensitivity | number | 0.3 | Drag sensitivity (degrees/px) |
inertia | boolean | true | Whether momentum is kept after a flick is released |
pauseOnHover | boolean | true | Pause the automatic rotation while the pointer hovers |
backDim | number | 0.72 | Maximum dimming applied to panels facing away (0–1) |
itemClassName | string | — | Extra classes for each panel container (rounded corners, and so on) |
ariaLabel | string | "3D 影像環" | Accessible label for the whole ring (the built-in default is Traditional Chinese — pass this prop to name it in your own language) |
Accessibility
- When the user has "reduce motion" enabled at the system level, it presents as a static, horizontally scrollable row of images, with no 3D and no dragging
- Keyboard supported: once focused, the left and right arrow keys rotate it one panel at a time
- Each panel can provide an accessible description through
label