3d Image Ring: React + Tailwind Component

A 3D image gallery projected as a ring / hemisphere that can be dragged to rotate, auto-rotates, and keeps its momentum.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/3d-image-ring.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Perspectiveperspective

1600

Top-down tilttilt

Auto-rotateautoRotate

Rotation speed (degrees/s)autoRotateSpeed

Back-face dimmingbackDim

0.72

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ThreeDImageRing/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/3d-image-ring.en.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 Image Ring"`	Accessible label for the whole ring (the English source includes this default — 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

3d Image Ring