Carousel Helix 3D

ProNew

Cards wound round an upright spiral that turns for ever, each one a step higher than the last.

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-helix-3d

Prop	Type	Default	Description
`items`	`{ title: string; caption?: string; art?: string }[]`	`-`	Cards on the helix.
`label`	`string`	`"Gallery"`	Accessible name of the list.
`perTurn`	`number`	`6`	Cards per full turn.
`radius`	`number`	`250`	Helix radius in px.
`rise`	`number`	`34`	Vertical step between cards in px.
`duration`	`number`	`28`	Seconds per turn.

One rotateY animation on the group; pauses offscreen.
With prefers-reduced-motion: reduce the helix becomes a flat grid of the same cards with no rotation.
Cards are list items in DOM order, so the reading order is the order of items.
Backfaces are hidden so text is never mirrored.