Skip to content

Dual-Speed Layered Marquee

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-dual-speed" aria-hidden="true">
  <div class="nuda-mq2-dual-speed__track nuda-mq2-dual-speed__track--back">
    <span>SPEED&nbsp;</span>
    <span>SPEED&nbsp;</span>
  </div>
  <div class="nuda-mq2-dual-speed__track nuda-mq2-dual-speed__track--front">
    <span>Layered &middot; Parallax &middot; Depth &middot;&nbsp;</span>
    <span>Layered &middot; Parallax &middot; Depth &middot;&nbsp;</span>
  </div>
</div>
CSS
.nuda-mq2-dual-speed {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  height: 70px;
  background: #0a0a0c;
  border-radius: 8px;
}

.nuda-mq2-dual-speed__track {
  position: absolute;
  left: 0;
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-weight: 800;
}

.nuda-mq2-dual-speed__track--back {
  top: 8px;
  font-size: 1.6rem;
  color: rgba(255,255,255,.06);
  animation: nuda-mq2-dual-speed-back 22s linear infinite;
}

.nuda-mq2-dual-speed__track--front {
  top: 34px;
  font-size: .85rem;
  color: #e4ff54;
  letter-spacing: .03em;
  animation: nuda-mq2-dual-speed-front 9s linear infinite;
}

.nuda-mq2-dual-speed:hover .nuda-mq2-dual-speed__track {
  animation-play-state: paused;
}

@keyframes nuda-mq2-dual-speed-back {
  to {
    transform: translateX(-50%);
  }
}

@keyframes nuda-mq2-dual-speed-front {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mq2-dual-speed__track {
    animation: none;
  }
}

How to use Dual-Speed Layered Marquee

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