Carousels
Cover Flow
A 3D coverflow carousel with spring physics, drag-to-navigate, scroll-wheel support, keyboard navigation, and optional reflection and audio feedback.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<CoverFlow
items={[
{ id: 1, image: "/cover1.webp", title: "Album One", subtitle: "Artist" },
{ id: 2, image: "/cover2.webp", title: "Album Two", subtitle: "Artist" },
{ id: 3, image: "/cover3.webp", title: "Album Three", subtitle: "Artist" },
]}
itemWidth={320}
itemHeight={320}
enableReflection
enableAudio
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | CoverFlowItem[] | — | Array of items. Each needs `id`, `image`, and `title`. Optional: `subtitle`. |
| itemWidth | number | 400 | Width of each card in pixels. |
| itemHeight | number | 400 | Height of each card in pixels. |
| stackSpacing | number | 100 | Pixel gap between stacked off-center cards. |
| centerGap | number | 250 | Pixel distance between the center card and its immediate neighbors. |
| rotation | number | 50 | Y-axis rotation in degrees applied to off-center cards. |
| initialIndex | number | 0 | Index of the card shown as active on first render. |
| enableReflection | boolean | false | Render a glass-like reflection beneath each card. |
| enableClickToSnap | boolean | true | Clicking an off-center card snaps it to the active position. |
| enableScroll | boolean | true | Horizontal scroll-wheel navigates between cards. |
| enableAudio | boolean | false | Play a synthesized tick sound on each navigation step. |
| scrollThreshold | number | 100 | Accumulated scroll delta required to advance one card. |
| reduceMotion | boolean | — | Override the system prefers-reduced-motion setting. |
| onIndexChange | (index: number) => void | — | Fired whenever the active index changes. |
| onItemClick | (item: CoverFlowItem, index: number) => void | — | Fired when the active (center) card is clicked. |
| renderImage | (props: RenderImageProps) => ReactNode | — | Custom image renderer — pass Next.js `<Image>` here for framework-native optimisation. |
| className | string | — | Tailwind classes merged onto the root container. |
Use cases
Music library
Browse album art with a tactile 3D flip — classic iTunes-style navigation for a music or podcast app.
Product gallery
Showcase product variants or catalogue items with depth and drama that flat carousels can't match.
Portfolio showcase
Present case studies or project covers in a way that invites exploration rather than passive scrolling.
Media catalogue
Game, film, or book cover browsers where the 3D perspective communicates hierarchy at a glance.