Carousel Depth Rail

ProNew

A scroll-snap rail of cards that recede in depth as they leave the centre, driven by the scroll position.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/carousel-depth-rail

Prop	Type	Default	Description
`items`	`{ title: string; caption?: string; art?: string }[]`	`-`	Cards on the rail.
`label`	`string`	`"Cards"`	Accessible name of the scrolling list.
`controls`	`boolean`	`true`	Show the previous and next buttons.

The depth is a view-timeline animation of transform and opacity: it moves only while you scroll.
With prefers-reduced-motion: reduce the depth effect is removed and the rail scrolls flat; scrolling by button is instant.
The rail is a focusable, labelled list.
Depth uses CSS scroll-driven animation; browsers without it show a flat rail.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/carousel-depth-rail

Prop	Type	Default	Description
`items`	`{ title: string; caption?: string; art?: string }[]`	`-`	Cards on the rail.
`label`	`string`	`"Cards"`	Accessible name of the scrolling list.
`controls`	`boolean`	`true`	Show the previous and next buttons.

The depth is a view-timeline animation of transform and opacity: it moves only while you scroll.
With prefers-reduced-motion: reduce the depth effect is removed and the rail scrolls flat; scrolling by button is instant.
The rail is a focusable, labelled list.
Depth uses CSS scroll-driven animation; browsers without it show a flat rail.