Skip to content

Now Playing Ticker

A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Marquees & TickersHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-mq2-now-playing" aria-hidden="true">
  <div class="nuda-mq2-now-playing__eq">
    <span class="nuda-mq2-now-playing__bar"></span>
    <span class="nuda-mq2-now-playing__bar"></span>
    <span class="nuda-mq2-now-playing__bar"></span>
    <span class="nuda-mq2-now-playing__bar"></span>
  </div>
  <div class="nuda-mq2-now-playing__info">
    <div class="nuda-mq2-now-playing__track">
      <span class="nuda-mq2-now-playing__text">Now Playing &mdash; Midnight Drive &middot; Neon Rebels</span>
      <span class="nuda-mq2-now-playing__text">Now Playing &mdash; Midnight Drive &middot; Neon Rebels</span>
    </div>
  </div>
</div>
CSS
.nuda-mq2-now-playing {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  background: #141416;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 8px 10px;
  overflow: hidden;
}

.nuda-mq2-now-playing__eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  flex: none;
}

.nuda-mq2-now-playing__bar {
  display: block;
  width: 3px;
  height: 16px;
  background: #e4ff54;
  transform-origin: bottom;
  animation: nuda-mq2-now-playing-bar 1s ease-in-out infinite;
}

.nuda-mq2-now-playing__bar:nth-child(1) {
  animation-delay: 0s;
}

.nuda-mq2-now-playing__bar:nth-child(2) {
  animation-delay: .2s;
}

.nuda-mq2-now-playing__bar:nth-child(3) {
  animation-delay: .4s;
}

.nuda-mq2-now-playing__bar:nth-child(4) {
  animation-delay: .1s;
}

.nuda-mq2-now-playing__info {
  overflow: hidden;
  flex: 1;
}

.nuda-mq2-now-playing__track {
  display: flex;
  width: max-content;
  animation: nuda-mq2-now-playing-scroll 10s linear infinite;
}

.nuda-mq2-now-playing__text {
  font-size: .62rem;
  color: #e5e5e5;
  white-space: nowrap;
  padding-right: 20px;
}

@keyframes nuda-mq2-now-playing-bar {
  0%,100% {
    transform: scaleY(.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes nuda-mq2-now-playing-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mq2-now-playing__bar {
    animation: none;
    transform: scaleY(.6);
  }
  .nuda-mq2-now-playing__track {
    animation: none;
  }
}

How to use Now Playing Ticker

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More marquees & tickers components

← Browse all NudaUI components