Depth CarouselPro

A 3D gallery you can throw: the item in front faces you, the rest turn away into depth, and a throw glides to a stop on an item.

Installation

When to use

A shelf of things people browse by picture: collections, albums, products, templates, featured stories.
A hero or showcase where the gallery itself should feel like something to play with.

When not to use

Items people compare or read side by side: a grid shows more at once.
Slides that carry the page's message one after another: the Carousel keeps them flat and in order.

Usage

Depth Carousel with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { DepthCarousel } from "@/components/dashral/pro/depth-carousel"
4
5import { useState } from "react"
6
7const albums = [
8  { id: "a1", title: "Dawn", color: "bg-orange-700" },
9  { id: "a2", title: "Tide", color: "bg-sky-800" },
10  { id: "a3", title: "Moss", color: "bg-emerald-800" },
11  { id: "a4", title: "Dusk", color: "bg-fuchsia-900" },
12]
13
14export default function Albums() {
15  const [index, setIndex] = useState(1)
16  return (
17    <DepthCarousel
18      label="Albums"
19      items={albums}
20      index={index}
21      onIndexChange={setIndex}
22      getKey={(album) => album.id}
23      getLabel={(album) => album.title}
24      // Clicking the item in front: open it.
25      onSelect={(album) => console.log("open", album.id)}
26      renderItem={(album) => (
27        <div className={`flex size-full items-end p-4 text-lg font-semibold text-white ${album.color}`}>{album.title}</div>
28      )}
29    />
30  )
31}

API reference

DepthCarousel

A 3D gallery you can throw: the item in front faces you and the others turn away into depth. Drag and let go to glide through (it stops on an item), click one beside to bring it forward, or use the arrow keys. Generic: renderItem draws each face.

Prop	Type	Default
`items`	`T[]` Required.	—
`renderItem`	`(item: T, state: { active: boolean; index: number }) => React.ReactNode` Required. An item's face: it fills the item, which the carousel shapes (radius, shadow) and moves.	—
`getLabel`	`(item: T) => string` Required. What an item is called, for screen readers.	—
`getKey`	`(item: T, index: number) => string` An item's key; its index by default.	`(_item, i) => String(i)`
`index`	`number` The item in front.	—
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	—
`onSelect`	`(item: T, index: number) => void` The item in front, clicked (or Enter on it): open it, play it…	—
`itemWidth`	`number` An item's width in px; its height follows `aspect`.	`240`
`aspect`	`number` An item's width over its height; 3 / 4 (portrait) by default.	`3 / 4`
`dots`	`boolean` The dots under it, one per item.	`true`
`loop`	`boolean` Goes round without an end: after the last item comes the first. Needs 5 items or more (fewer would show the same item on both sides), so with fewer it stays a row with ends.	`false`
`nav`	`boolean` Previous and next buttons at the gallery's sides. Off by default: it's dragged, clicked and keyed.	`false`
`label`	`string` The gallery's name, for screen readers.	`"Gallery"`
`className`	`string`	—
`classNames`	`DepthCarouselClassNames`	—

type DepthCarouselClassNames

Prop	Type	Default
`root`	`string`	—
`stage`	`string`	—
`item`	`string`	—
`dots`	`string`	—

Keyboard

Keys	Action
`←`or`→`	The previous or next item
`Home`or`End`	The first or last item
`Enter`or`Space`	Select the item in front (onSelect)

Accessibility

A region with the role description "carousel", named by label; each item is a group with the role description "slide", the one in front marked aria-current.
A live region says the item in front and its place ("Lisbon, 2 of 7").
The dots are buttons named "Show <item>"; the side buttons (nav) are named Previous and Next.

Motion

A throw glides on with its speed and comes to rest on an item; past either end it gets heavier.
Items beside the front one turn away, step back and fade with distance, each on a soft shadow.
Smooth tweens on [0.4, 0, 0.2, 1], never springs. With reduced motion there's no turn or depth: the items slide flat.