3D CD Disc Carousel

Galleries 473

About

3D CD disc carousel for a music or film catalogue: printed discs sit on a slanted line, roll like wheels as you drag, swipe or use the arrows, with an editorial credits block, press quotes and an index menu. Use it for album, film or product showcases.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 3D CD Disc Carousel to your project and fits it to your theme.

Code

How 3D CD Disc Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import DiscCascadeCarousel, { type DiscCascadeItem } from "@/components/ui/disc-cascade-carousel"

const u = (id: string) =>
  "https://images.unsplash.com/photo-" + id + "?q=80&w=600&h=600&auto=format&fit=crop&ixlib=rb-4.1.0"

// Photos as disc labels, a dark stage, looping autoplay and real fonts.
const records: DiscCascadeItem[] = [
  { title: "Cable Car", src: u("1774565784366-72db806a40f9"), credits: [{ label: "Side A", value: "Ascent" }, { label: "Year", value: "2018" }, { label: "Length", value: "41 min" }], reviews: [{ source: "Low Fidelity", quote: "Climbs and never stops" }, { source: "The Wax", quote: "A record for windows", stars: 4 }] },
  { title: "Pale House", src: u("1776031312164-f22c0edbdfb9"), labelStyle: "block", credits: [{ label: "Side A", value: "Rooms" }, { label: "Year", value: "2019" }, { label: "Length", value: "38 min" }], reviews: [{ source: "Groove Notes", quote: "Sunlit and spare" }, { source: "Low Fidelity", quote: "Every song a doorway" }] },
  { title: "Cherry Season", src: u("1777763517503-05d74f2e0008"), credits: [{ label: "Side A", value: "Blossom" }, { label: "Year", value: "2020" }, { label: "Length", value: "44 min" }], reviews: [{ source: "The Wax", quote: "Soft as April" }, { source: "Groove Notes", quote: "Pink noise, perfected" }] },
  { title: "Bottle Shop", src: u("1774651458632-17df84bad45e"), credits: [{ label: "Side A", value: "Last Call" }, { label: "Year", value: "2021" }, { label: "Length", value: "36 min" }], reviews: [{ source: "Low Fidelity", quote: "Fizzes from the first bar" }, { source: "The Wax", quote: "Bright, sweet, gone", stars: 4 }] },
  { title: "Tree-Lined Road", src: u("1778360508753-dcb2afbeadc2"), labelStyle: "block", credits: [{ label: "Side A", value: "Mile One" }, { label: "Year", value: "2022" }, { label: "Length", value: "52 min" }], reviews: [{ source: "Groove Notes", quote: "Made for the long way home" }, { source: "Low Fidelity", quote: "Shade and motion" }] },
  { title: "Window Seat", src: u("1777221895589-2f81579e0dca"), credits: [{ label: "Side A", value: "7A" }, { label: "Year", value: "2023" }, { label: "Length", value: "40 min" }], reviews: [{ source: "The Wax", quote: "The view does the talking" }, { source: "Groove Notes", quote: "Gentle velocity" }] },
  { title: "Low Tide", src: u("1777221895551-844a3c1243b3"), credits: [{ label: "Side A", value: "Gulls" }, { label: "Year", value: "2024" }, { label: "Length", value: "47 min" }], reviews: [{ source: "Low Fidelity", quote: "Salt air on tape" }, { source: "The Wax", quote: "Wide open, wind-blown" }] },
]

export default function Demo() {
  return (
    <div className="w-full">
      <DiscCascadeCarousel
        items={records}
        brand="side/b"
        nav={[{ label: "Records" }, { label: "Sessions" }]}
        indexLabel="Catalogue"
        defaultIndex={1}
        loop
        autoplay={3600}
        background="radial-gradient(120% 90% at 50% 40%, #1d1d21, #0b0b0d)"
        color="#ecebe7"
        fontHref="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;600;800&family=Oswald:wght@600;700&display=swap"
        hint="Drag · ← →"
        ariaLabel="Record catalogue"
      />
    </div>
  )
}