Album Cards

A stacked row of Spotify album covers that pop a spinning vinyl disc when clicked, with hover lift, neighbor dimming, and album art reflections.

Installation

Requires a /api/spotify route. See the Spotify Card docs for setup instructions.

Usage

import { AlbumCards } from '@/components/odysseyui/album-cards';

const albums = [
  { id: '1', url: 'https://open.spotify.com/track/0DTSnA1bcVI5niJzoyBPyZ' },
  { id: '2', url: 'https://open.spotify.com/track/4iZ4pt7kvcaH6Yo8UoZ4s2' },
  { id: '3', url: 'https://open.spotify.com/track/2374M0fQpWi3dLnB54qaLX' },
];

export default function Page() {
  return <AlbumCards albums={albums} />;
}

How It Works

Each card fetches its own track metadata via GET /api/spotify?url=... independently, so the stack renders progressively.
Cards stack with a z-index determined by their position (leftmost on top). Clicking ejects an SVG vinyl disc upward with a spring animation, and the clicked card rises to z-200 to sit above siblings.
Only one vinyl can be open at a time — activating a new card retracts the previous one.
The vinyl SVG uses unique useId-scoped filter IDs to avoid SVG mask conflicts when multiple cards render simultaneously.
A flipped, masked copy of the album art beneath each card creates a CSS-only reflection effect.
The @keyframes spin animation must be present in your globals.css for the disc to rotate.

API Reference

`AlbumCards`

Prop	Type	Default
`albums?`	`AlbumCardData[]`	-
`title?`	`string`	`"Music I'm Vibin' to"`
`className?`	`string`	-

`AlbumCardData`

Prop	Type	Default
`id?`	`string`	-
`url?`	`string`	-