Added 17 Aug 2026

ocean-now-playing-14011

Ocean Now Playing

Cards

Ocean Now Playing

Player row where the level meter runs on negative animation delays, so the twelve bars start mid-cycle and never line up into a visible wave.

Cardscardmusicnow playingwaveformplayerocean

lines of CSS: 96lines of CSS
dependencies: 0dependencies
browser, for years: Everybrowser, for years
stops under reduced motion: Guardedstops under reduced motion

Backdrop

SundialKiasmos

Open a live copy in

Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.

ocean-now-playing-14011.css

.fx-v10-card-nowplaying-ocean-14010 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 246px;
  padding: 0.6rem 0.65rem;
  border-radius: 0.6rem;
  background: #111827;
  border: 1px solid #1f2937;
  transition: border-color 0.24s ease;
}
.fx-v10-card-nowplaying-ocean-14010:hover { border-color: #3b82f6; }
.fx-v10-card-nowplaying-ocean-14010 .art {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 0.4rem;
  background:
    radial-gradient(70% 70% at 30% 25%, #06b6d4, transparent 70%),
    linear-gradient(140deg, #3b82f6, #6366f1);
}
.fx-v10-card-nowplaying-ocean-14010 .mt { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.fx-v10-card-nowplaying-ocean-14010 .mt b {
  font-size: 0.78rem;
  font-weight: 650;
  color: #f1f5f9;
}
.fx-v10-card-nowplaying-ocean-14010 .mt > span {
  font-size: 0.67rem;
  color: #64748b;
}
.fx-v10-card-nowplaying-ocean-14010 .wv {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  margin-top: 0.2rem;
}
.fx-v10-card-nowplaying-ocean-14010 .wv i {
  width: 2.5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #06b6d4, #6366f1);
  animation: fx-v10-card-nowplaying-ocean-14010-eq 1.1s ease-in-out infinite;
}
@keyframes fx-v10-card-nowplaying-ocean-14010-eq {
  0%, 100% { height: 4px; }
  50%      { height: 15px; }
}
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(1)  { animation-delay: 0s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(2)  { animation-delay: -0.9s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(3)  { animation-delay: -0.4s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(4)  { animation-delay: -0.7s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(5)  { animation-delay: -0.2s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(6)  { animation-delay: -1s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(7)  { animation-delay: -0.5s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(8)  { animation-delay: -0.15s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(9)  { animation-delay: -0.8s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(10) { animation-delay: -0.35s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(11) { animation-delay: -0.65s; }
.fx-v10-card-nowplaying-ocean-14010 .wv i:nth-child(12) { animation-delay: -0.25s; }
.fx-v10-card-nowplaying-ocean-14010 .pp {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
  place-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fx-v10-card-nowplaying-ocean-14010 .pp i {
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: #0b1120;
}
.fx-v10-card-nowplaying-ocean-14010 .pp:hover { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .fx-v10-card-nowplaying-ocean-14010,
  .fx-v10-card-nowplaying-ocean-14010::before,
  .fx-v10-card-nowplaying-ocean-14010::after,
  .fx-v10-card-nowplaying-ocean-14010 *,
  .fx-v10-card-nowplaying-ocean-14010 *::before,
  .fx-v10-card-nowplaying-ocean-14010 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

ocean-now-playing-14011.html

<article class="fx-v10-card-nowplaying-ocean-14010">
  <i class="art"></i>
  <div class="mt">
    <b>Sundial</b>
    <span>Kiasmos</span>
    <div class="wv">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
  <button class="pp">
    <i></i>
    <i></i>
  </button>
</article>

What do I do with this?

Put ocean-now-playing-14011.css anywhere your page already loads CSS from — in Next.js that is app/globals.css, or any stylesheet with a <link> in your HTML.
Then put the class on the element you want it on: <button class="fx-v10-card-nowplaying-ocean-14010">. The CSS does nothing until a class name in it matches something on the page.

Link the stylesheet, then paste the markup wherever you need it.

npx hoverlab add ocean-now-playing-14011

What's included

The markup and the stylesheet, in whichever framework you pick
No runtime dependencies

Works with

React
Vue
Svelte
Tailwind
styled-components
Plain CSS

npx hoverlab add ocean-now-playing-14011

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Motion safety

Static estimate, read from the CSS

Reduced motion: Guarded
Ships a prefers-reduced-motion block, so the loop settles into its end state for visitors who ask for less motion.
What it animates: Reflows
Animates height (and border-color). The browser re-lays-out the page on every frame; prefer transform if you can.
Flashing (WCAG 2.3.1): No flashing found
No repeating change in opacity, colour or brightness large enough to count as a flash.
Layout shift (CLS): May shift layout
Animates height on a box in flow, so content beside or after it can move. A category from the CSS, not a measurement for this effect.

Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed

38 more effects in Cards

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Cards

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

What's included

Copy-ready HTML and CSS — 96 lines, no build step
7 export formats — HTML, CSS, React, Vue, Svelte, styled-components, Tailwind
Live customization for hue, saturation, scale and speed
Editable in the playground

npx hoverlab add ocean-now-playing-14011
writes it into your project
npx hoverlab dna ocean-now-playing-14011
hands it to your agent

Licence

Free to copy and use in personal and non-commercial projects, in as many as you like, with no attribution. Shipping it in client work or a paid product needs Pro ($79 once). Read the licence.

Works with

FrameworksPlain HTMLReactVueSvelteTailwindstyled-components

AgentsCLIMCPFigma

Where this fits

Full sections that use this kind of element.

Bento Feature GridFeature Sections
Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
Product Card GridProduct Listings
Responsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.
Masonry Testimonial WallTestimonials
Quotes packed by height using CSS multi-column, with star ratings, initial avatars and no ragged bottom edge.

Browse all blocks

Similar effects

Cards

Emerald Plan

Hover to lift

Hover Lift Card
A gradient card that rises on hover with an intensifying colored shadow for a tactile floating effect.
Frosted

Blur + transparency

Glassmorphism Card
A frosted glass card with backdrop blur sitting over a colorful gradient plate — the classic iOS-style material.
Soft UI

Hover to press

Neumorphism Card
A soft extruded card with dual light/dark shadows that invert into an inset on hover for a pressed feel.
Spotlight

Move your cursor

Spotlight Card
A dark card where a cyan spotlight follows the cursor, revealing the surface only where you point. (Move your mouse over it.)
Front

Back

3D Flip Card
A card that rotates 180° on the Y axis when hovered, revealing a different face on the back.
Holographic

Animated border ring

Gradient Border Card
A dark card framed by an animated four-color gradient ring that continuously morphs via a mask trick.

Browse all cards

7 variations of Ocean Now Playing

Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.

Arcade
signature
by Hoverlab
A hard rotation, vivid, small and twice as fast.
Open
Dusk
muted
by Hoverlab
Muted and rotated cool — washed out toward evening.
Open
Voltage
electric
by Hoverlab
A small rotation and a large amount of saturation.
Open
Petite
proportion
by Hoverlab
The smallest this scales to and still reads.
Open
Brisk
tempo
by Hoverlab
A quarter quicker, which is often what a hover state wants.
Open
Marigold
warm
by Hoverlab
The furthest warm rotation, held at a strong saturation.
Open
Tidepool
cool
by Hoverlab
The furthest cool rotation, toward greens and cyans.
Open

Ocean Now Playing

What do I do with this?

What's included

Works with

License

Motion safety

38 more effects in Cards

Shipping one commercially

7 variations of Ocean Now Playing

Arcade

Dusk

Voltage

Petite

Brisk

Marigold

Tidepool