3D Carousel

A premium 3D carousel with a fanned layout, smooth interactive animations, and a sleek adaptive aesthetic. It features physics-based touch and mouse drag gestures, keyboard arrow navigation, circular endless fanning, and an auto-play timer that intelligently pauses on hover.

Drag the center card left or right, use the arrow keys, or click a fanned neighbour to bring it forward. Autoplay pauses while the pointer is over the deck.

3D carousel

Passitems: as an array of { id, category, title, image } — description is optional and clamps to two lines.
autoPlay: is on by default and pauses on its own while the pointer is over the deck.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Carousel 3D

npx shadcn@latest add @algorize-ui/carousel-3d

components/custom/blocks/ThreeDCarouselBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Carousel 3D to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Examples

Shorter deck

items: also drives the fan — the circular offsets are derived from items.length, so a shorter array tightens the spread with no other change.

Without arrows or dots

showArrows{false}: drops the whole control bar: the previous / next buttons and the autoplay pause toggle.
showDots{false}: drops the pagination dots. Each flag works on its own, so you can keep either one.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Animation Performance

Avoid placing too many heavy animated components on a single screen to prevent layout thrashing and maintain 60fps performance. Use intersection observers to pause off-screen animations.

State Management

When triggering animations via state changes, ensure you wrap state updates in startTransition or use lightweight stores to prevent React rendering bottlenecks during the animation tick.

Props Reference

Component / Interface	Prop	Type	Default	Description
`ThreeDCarousel`	`items`	`CarouselItem[]`	Required	An array of data objects defining each slide's category, title, description, and image URL.
`ThreeDCarousel`	`autoPlay`	`boolean`	`true`	Enables or disables automatic slide advancement. Automatically pauses when a user hovers over the carousel.
`ThreeDCarousel`	`autoPlayInterval`	`number`	`4000`	The time duration in milliseconds between automatic slide transitions.
`ThreeDCarousel`	`showArrows`	`boolean`	`true`	Shows the control bar: the previous / next slide buttons and the autoplay pause toggle. Drag, keyboard arrows and clicking a side card keep working when this is `false`, and autoplay still pauses on hover.
`ThreeDCarousel`	`showDots`	`boolean`	`true`	Shows the pagination dots under the deck, which mark the active slide and jump to a slide on click.
`ThreeDCarousel`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost responsive flex container.
`CarouselItem`	`id`	`string`	Required	A unique identifier string required for safe React list rendering and for tracking each card as the fan turns.
`CarouselItem`	`title`	`string`	Required	Primary headline text displayed prominently on the card overlay.
`CarouselItem`	`category`	`string`	Required	A short descriptive pill/badge label rendered above the title (e.g., "Architecture", "Design").
`CarouselItem`	`image`	`string`	Required	The URL to the high-resolution background image for the card.
`CarouselItem`	`description`	`string`	`undefined`	Optional supporting paragraph text displayed below the headline. Automatically clamped to 2 lines.