Spark UI
Coverflow Player

Customize

Artwork6 images
Track Titles6 items
Artists6 items
Audio Clips6 items
Accent Color
Card Width
210
Spread
150
Tilt
28
Side Cards
2
Glass Opacity
22
Glass Blur
24
Clip Length
10
Equalizer
Start Playing
Spring Speed
100

Coverflow Player

Widgets
242 views•27 uses

Props

15 properties
imagesstring[]6 images
Cover images, paired with the titles by position.
titlesstring[]6 images
One card is created per title.
artistsstring[]6 images
Artist line under each title.
audiostring[]6 images
Audio URL per card, paired by position. Leave one blank for a silent card.
accentColorcolor#ffffff
Progress bar and equalizer colour.
cardWidthnumber210
Width of the focused card.
spreadnumber150
Distance between neighbouring cards.
tiltnumber28
How far side cards turn away, in degrees.
visibleSidesnumber2
Cards shown on each side of the focused one.
glassOpacitynumber22
Frost of the cards and dock.
blurnumber24
Backdrop blur behind the glass.
trackLengthnumber10
Seconds each track plays before moving to the next.
showEqualizerbooleantrue
Show the bouncing bars in the dock.
startPlayingbooleantrue
Begin with playback running.
speednumber100
Speed of the card and backdrop transitions.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add coverflow-player

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A now-playing coverflow: album cards fan out in 3D around the focused track over a backdrop blurred from its artwork, with a glass transport dock and live progress underneath.

KEY FEATURES

  • ·Cards sit on a looping ring and spring into place with a 3D turn, tightening their spacing past the first neighbour
  • ·The backdrop is the focused artwork blown up and blurred, crossfading so the whole scene takes on the colour of what's playing
  • ·Swipe, scroll, press the arrow keys or click a side card to switch tracks; click the focused card or press Space to play and pause
  • ·The dock's progress bar runs in real time and moves the carousel on when a track ends, with a bouncing equalizer while playing
  • ·Scales itself to fit any container, from a small preview card to a full-screen demo