Cards standing on a circular orbit in real CSS perspective. Drag or swipe with inertia and snap, use the arrow keys or the buttons, or let it autoplay.
Charged particles bending around the cursor.
WEBGL
npx shadcn@latest add https://hyperblur.dev/r/carousel-ring-3d.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel-ring-3d.tsx.
import { CarouselRing3d } from "@/components/hyperblur/carousel-ring-3d"
<CarouselRing3d autoplay={4000} onActiveChange={(i, item) => console.log(i, item.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; title: string; kicker?: string; text?: string; tag?: string }[] | built-in set of 7 | Cards on the ring. The description is hidden automatically when cards get narrow. |
| index | number | Controlled front card. The ring turns the shortest way to it. Pair with onActiveChange. | |
| defaultIndex | number | 0 | Front card on first render when uncontrolled. |
| onActiveChange | (index: number, item: CarouselRing3dItem) => void | Called whenever a new card reaches the front, including while dragging. | |
| autoplay | number | 0 | Milliseconds between automatic steps. 0 turns it off. Pauses on hover, focus and drag. |
| height | number | 340 | Total height in pixels. Card size and type scale with it. |
| spread | number | 0.36 | Ring radius as a fraction of the component width. |
| accent | string | "#ff4d4d" | Color of the active card glow, brackets, orbit ticks and counter. |
| label | string | "Experiments" | Accessible name of the carousel region. |
| showControls | boolean | true | Show the previous and next buttons with the counter and progress dashes. |