AIMRAN
◌
REPRODUCIENDO

Soft Motion

Nara Fields

HTML + CSSCards

Music player card

A compact now-playing card with a slowly turning cover and controls that bounce when you press them.

Settings

16px
1x

Code

<article class="uv-cplay"><div class="cover"><i></i><b>◌</b></div><small>REPRODUCIENDO</small><h3>Soft Motion</h3><p>Nara Fields</p><div class="line"><i></i></div><footer><button>‹</button><button class="play">▶</button><button>›</button></footer></article>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Cards

3D tilt card

CardsReact + Motion

Spotlight card

CardsReact + Motion

Weather and calendar widget

CardsReact + Motion

Spotlight border card

CardsHTML + CSS

Lift and zoom card

CardsHTML + CSS

3D flip card

CardsHTML + CSS

Animated gradient card

CardsHTML + CSS

Hover reveal card

CardsHTML + CSS

Where to use it

Good for anywhere music or audio is part of the story: the latest single on an indie band's site, a featured episode on a podcast landing page, a relaxing track in a meditation app. Under the hood it is only HTML and CSS: a music player card with a gradient cover you tint with your own colors.

It does not play sound by itself: hook the buttons up to an audio element or another player, and move the progress bar with the real time. Swap the abstract cover for real artwork, and keep the title short enough for one line.