CoverflowCarousel

A 3D coverflow carousel that tilts and depth-layers side slides for a cinematic browsing experience. Great for album art, portfolios, and showcases.

Interactive Demo

Click a side slide or drag to flip through the covers.

Usage

import { CoverflowCarousel } from "@mantleui/react/motion";

const slides = covers.map((c) => <div key={c.title}>{c.title}</div>);

<CoverflowCarousel slides={slides} defaultValue={0} loop />

Props

Prop	Type	Default	Description
`slides`	`ReactNode[]`	—	The slides to render.
`value`	`number`	—	Controlled current slide index.
`defaultValue`	`number`	`0`	Default current slide index (uncontrolled).
`onValueChange`	`(index: number) => void`	—	Called when the current slide changes.
`autoplay`	`boolean`	`false`	Whether the carousel auto-advances.
`interval`	`number`	`3000`	Autoplay interval in ms.
`loop`	`boolean`	`true`	Whether to wrap around at edges.
`rotateAngle`	`number`	`30`	rotateY angle (degrees) applied to side slides.
`slideDistance`	`number`	`150`	Horizontal distance (px) between adjacent slides.

slides

ReactNode[]

The slides to render.

value

number

Controlled current slide index.

defaultValue0

number

Default current slide index (uncontrolled).

onValueChange

(index: number) => void

Called when the current slide changes.

autoplayfalse

boolean

Whether the carousel auto-advances.

interval3000

number

Autoplay interval in ms.

looptrue

boolean

Whether to wrap around at edges.

rotateAngle30

number

rotateY angle (degrees) applied to side slides.

slideDistance150

number

Horizontal distance (px) between adjacent slides.