A carousel in perspective: the active card is large and sharp while its neighbors turn away, shrink and dim. Supports drag, arrows, dots, keyboard and autoplay that pauses on hover.
npx shadcn@latest add https://hyperblur.dev/r/carousel-depth.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel-depth.tsx.
import { CarouselDepth } from "@/components/hyperblur/carousel-depth"
<div style={{ height: 320 }}><CarouselDepth onChange={(i) => console.log(i)} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src?: string; title?: string; caption?: string }[] | 7 built-in scenes | Slides to show. A slide without src renders a built-in gradient scene. |
| value | number | Controlled active slide index. Pair with onChange. | |
| defaultValue | number | 0 | Initial active slide when uncontrolled. |
| onChange | (index: number) => void | Called when the user moves to another slide. | |
| autoplay | boolean | true | Advance on a timer. Pauses on hover, focus, drag and when off-screen. Off under reduced motion. |
| interval | number | 3200 | Milliseconds between autoplay steps. |
| loop | boolean | true | Wrap around at both ends. Needs at least 6 slides; with fewer the carousel stops at the ends. |
| accent | string | "#2f7bff" | Color of the active outline, dots and focus ring. |
| label | string | "Image carousel" | Accessible name of the carousel. |