Album Coverflow Now Playing

ProNew

Use this when people choose one item from a small shelf of covers: a coverflow shelf with a readout of the centred title and a Play button that names what it will play.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for music, film or book pickers where the cover is the main cue and a title and one action follow the selection.

Do not use it for more than about twelve covers or when people need to compare details. Use a grid.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`albums`	`Album[]`	`-`	Each album has an id, title, artist and a cover node.
`label`	`string`	`-`	Accessible name of the shelf.
`onPlay`	`(album: Album) => void`	`-`	Called by the Play button with the centred album.

Accessibility

The Play button always names the centred album ("Play Night Drive"), so it makes sense out of context.
The title readout is plain text, not a live region: the carousel already announces the slide once.
The 3D turn is visual only and is removed with prefers-reduced-motion.
Keyboard: Left / Right: previous or next cover
Keyboard: Enter on Play: play the centred album

Testing

The pattern ships with a Testing Library test (album-coverflow-now-playing.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.