Box Carousel

Slides sit on the faces of a 3D cube that turns to the next one. Flip with buttons, by dragging or automatically.

Customize

width280pxheight200px

perspective600pxautoPlayInterval3000msdragSensitivity0.5

faceColor

edgeColor

Based on Box Carousel (MIT license) · Terms of use

18 properties

Property	Type	Default	Description
items	{ id: string; type: 'image' \| 'video'; src: string; alt?: string; poster?: string }[]	—	Slides: images or videos.
width	number	`280`	Cube width, in pixels.
height	number	`200`	Cube height, in pixels.
direction	'top' \| 'bottom' \| 'left' \| 'right'	`"left"`	Which way the cube turns.
perspective	number	`600`	Perspective depth: lower means stronger 3D.
autoPlay	boolean	`false`	Flip slides automatically.
autoPlayInterval	number	`3000`	Pause between automatic turns, in milliseconds.
enableDrag	boolean	`true`	Allow turning by dragging.
dragSensitivity	number	`0.5`	How much the cube turns per dragged pixel.
transition	ValueAnimationOptions	`"{ duration: 1.25, ease: [0.953, 0.001, 0.019, 0.995] }"`	Turn animation for next and prev.
snapTransition	ValueAnimationOptions	`"{ type: 'spring', damping: 30, stiffness: 200 }"`	How the cube settles after a drag.
dragSpring	{ stiffness?: number; damping?: number; mass?: number }	`"{ stiffness: 200, damping: 30 }"`	Spring while dragging.
debug	boolean	`false`	Highlight the cube faces for debugging.
onIndexChange	(index: number) => void	—	Called when the slide changes.
ref	{ next(): void; prev(): void; getCurrentItemIndex(): number }	—	Control the carousel from code.
faceColor	string	`"#171717"`	Background of the cube faces, seen behind transparent or loading media.
edgeColor	string	`"rgba(255, 255, 255, 0.1)"`	Thin edge drawn around each face.
className	string	—	Extra classes.

3 required packages

npm install motion clsx tailwind-merge