# Equalizer now playing (C 059)

Category: Cards  
Tags: music, now-playing, mini, equalizer, animated, light  
Page: https://designforai.dev/snippet/card-059

## Prompt

Make a 280px now-playing mini card: white, 1px #e5e7eb border, 14px radius, 10px padding, soft shadow. Left a 44px album tile with 10px radius and a 135deg gradient #22d3ee to #6366f1. Middle a 14px bold track name (ellipsis) over a 12px #6b7280 artist. Right an equalizer of four 3px wide indigo #6366f1 bars, 18px tall, each bouncing between 30% and 100% height (scaleY from the bottom) on a 1s loop with staggered delays; hover pauses them.

## HTML

```html
<div class="card-059">
  <span class="card-059__art"></span>
  <span class="card-059__text"><b>Glass Corridors</b><small>Nightbus</small></span>
  <span class="card-059__eq"><i></i><i></i><i></i><i></i></span>
</div>
```

## CSS

```css
.card-059 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 280px;
  padding: 10px 14px 10px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-family: system-ui,sans-serif;
  color: #111827;
  box-shadow: 0 2px 8px rgba(0,0,0,.06)
}
.card-059__art {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg,#22d3ee,#6366f1)
}
.card-059__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0
}
.card-059 b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.card-059 small {
  font-size: 12px;
  color: #6b7280
}
.card-059__eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px
}
.card-059__eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #6366f1;
  transform-origin: bottom;
  animation: card-059-bounce 1s ease-in-out infinite
}
.card-059__eq i:nth-child(2) {
  animation-delay: -.3s
}
.card-059__eq i:nth-child(3) {
  animation-delay: -.6s
}
.card-059__eq i:nth-child(4) {
  animation-delay: -.15s
}
.card-059:hover .card-059__eq i {
  animation-play-state: paused
}
@keyframes card-059-bounce {
  0%,100% {
    transform: scaleY(.3)
  }
  50% {
    transform: scaleY(1)
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-059, .card-059 * { animation: none; transition: none; }
}
```