Components

Cover Flow

Free

A 3D coverflow carousel with spring physics. Navigate by drag, scroll wheel, or keyboard, with optional reflection and audio feedback.

Installation

FreeNo license required.
npx shadcn add https://useplanes.com/r/cover-flow.json
<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
/>

Examples

Headless hook

useCoverFlow returns activeIndex, scrollX, effectiveScrollX, isDragging, scale, goTo, containerRef, containerProps and handleCardClick — spread containerProps onto a motion.div with containerRef and render your own covers.

import { useCoverFlow } from "@/components/ui/CoverFlow";

const { effectiveScrollX, activeIndex, containerRef, containerProps } =
  useCoverFlow({ items, scrollMode: "scrub", centerGap: 250 });

<motion.div ref={containerRef} {...containerProps} className="relative h-full w-full">
  {/* your covers, driven by effectiveScrollX */}
</motion.div>

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.