Browse components
Depth Carousel
A looping carousel where cards recede into 3D depth and blur the further they sit from center. Drag, click, arrows or keys.
Installation
npx shadcn@latest add @glint-ui/depth-carouselFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/depth-carousel.json
Usage
import { DepthCarousel } from "@/components/ui/depth-carousel";
<DepthCarousel
items={[
{ image: "/a.jpg", title: "Aurora", subtitle: "Iceland, 2024" },
{ image: "/b.jpg", title: "Meridian", subtitle: "Chile, 2023" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, subtitle? }. |
| cardWidth | number | 250 | Card width in px. |
| cardHeight | number | 330 | Card height in px. |
| spacing | number | 170 | Px between card centers. |
| depth | number | 180 | Z px pushed back per step. |
| blur | number | 3 | Blur px added per step. |
| rotate | number | 18 | Y rotation of side cards in degrees. |
| visible | number | 2 | Cards shown per side. |
| autoplay | boolean | true | Advance automatically (pauses on hover). |
| autoplayDelay | number | 3500 | Ms between steps. |
| className | string | — | Extra classes for the root element. |