Wensity

Cover Flow Carousel

Pro

A 3D Cover Flow album carousel where side cards swing into the center and a mini player below follows the track.

carouselcss 3d3dcover flowmusicplayerkeyboardcards
Cover Flow Carousel component preview

Overview

Cover Flow Carousel is a React and Tailwind CSS 3D album slider in the classic iTunes style, in Next.js or any React app, built on Framer Motion. Click a side card or press the arrow keys and it swings into the center while the rest of the deck re-hinges around it, and a glass mini player below follows the centered track with play, progress, and mute. Active index and playback can be controlled, and card size and perspective are props. Reduced motion parks the progress ring. The player plays no audio, so wire onPlayingChange and onMutedChange to your own player.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add cover-flow

Usage

Import CoverFlow from @/components/wensity/cover-flow and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { CoverFlow } from "@/components/wensity/cover-flow";


export default function Example() {
  return (
    <CoverFlow
      defaultActiveIndex={2}
      defaultPlaying
    />
  );
}

Props

PropTypeDefaultDescription
tracksCoverFlowTrack[]Six Wensity cover-art platesAlbum cards in the flow. Each needs id, artist, title, and image.
activeIndexnumber-Controlled index of the centered card.
defaultActiveIndexnumber2Uncontrolled initial centered card.
onActiveChange(index: number, track: CoverFlowTrack) => void-Fires whenever the centered track changes.
playingboolean-Controlled playback flag for the mini player.
defaultPlayingbooleantrueUncontrolled initial playback. The waveform and progress run while playing.
onPlayingChange(playing: boolean) => void-Fires whenever play or pause toggles.
cardWidthnumber248Card width in pixels.
cardHeightnumber318Card height in pixels.
perspectivenumber900CSS perspective distance in pixels, floored at 400. Lower is a wider lens.
hidePlayerbooleanfalseHide the glass playback bar under the carousel.
onMutedChange(muted: boolean) => void-Fires when the mute button toggles. The bar is UI only: mute your own audio here.
onMore() => void-Handler for the overflow button. Disabled until you pass one.
onCast() => void-Handler for the cast button. Disabled until you pass one.
onEqualizer() => void-Handler for the equalizer button. Disabled until you pass one.
labelstring"Cover Flow player"Accessible name for the carousel region.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.

Featured in React 3D components and React carousel components.