cardsAdvancedhover

Vinyl Album Card

A music card with album art and a vinyl record sliding out and spinning on hover.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a music card where a vinyl record slides out from behind the album sleeve and spins on hover. The card has a square album sleeve image, with the vinyl positioned absolutely behind it (same size, z-index lower). Use radial-gradient stripes to render the vinyl grooves. On card:hover, transform the vinyl with translateX(46%) and rotate(720deg) over 0.9s — it appears to slide out the right side while spinning twice. A small purple label disc sits at the center of the vinyl with a track-side indicator like 'A1'.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/vinyl-card
-->
<article class="card">
  <div class="vinyl"><div class="hole"></div><div class="label">A1</div></div>
  <img class="sleeve" alt="" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f87171'/><stop offset='1' stop-color='%23a855f7'/></linearGradient></defs><rect width='400' height='400' fill='url(%23g)'/><circle cx='280' cy='120' r='56' fill='%23fff' fill-opacity='.18'/><text x='32' y='364' fill='%23fff' font-family='system-ui' font-size='28' font-weight='700'>NIGHT MOTION</text></svg>" />
  <div class="meta">
    <strong>Night Motion</strong>
    <span>Static Wing · 2026</span>
  </div>
</article>