Infinite Marquee / Ticker

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  overflow: hidden;
}

/* ── Section ── */
.marquee-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.marquee-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}

/* ── Marquee container ── */
.marquee {
  --marquee-duration: 30s;
  --marquee-gap: 2rem;
  overflow: hidden;
  display: flex;
  width: 100%;
}

/* ── Track — holds two copies side by side ── */
.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

/* Pause on hover */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--marquee-gap) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ── Content group ── */
.marquee__content {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  flex-shrink: 0;
}

/* ── Logo items ── */
.marquee-logo {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.2s ease;
  padding: 0 0.5rem;
}

.marquee:hover .marquee-logo {
  color: #475569;
}

/* Separator dots between logos */
.marquee__content:not([aria-hidden]) .marquee-logo::after {
  content: "·";
  margin-left: var(--marquee-gap);
  color: #1e293b;
}

.marquee__content:not([aria-hidden]) .marquee-logo:last-child::after {
  display: none;
}

/* ── Tag items ── */
.marquee-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.marquee:hover .marquee-tag {
  border-color: rgba(255, 255, 255, 0.12);
  color: #64748b;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Infinite Marquee</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="page">

    <!-- Logo marquee — forward -->
    <div class="marquee-section">
      <p class="marquee-label">Trusted by teams worldwide</p>
      <div class="marquee" aria-label="Partner logos">
        <div class="marquee__track">
          <div class="marquee__content">
            <span class="marquee-logo">Vercel</span>
            <span class="marquee-logo">Figma</span>
            <span class="marquee-logo">Linear</span>
            <span class="marquee-logo">Notion</span>
            <span class="marquee-logo">Stripe</span>
            <span class="marquee-logo">Supabase</span>
            <span class="marquee-logo">Tailwind</span>
            <span class="marquee-logo">Astro</span>
          </div>
          <!-- Duplicate for seamless loop -->
          <div class="marquee__content" aria-hidden="true">
            <span class="marquee-logo">Vercel</span>
            <span class="marquee-logo">Figma</span>
            <span class="marquee-logo">Linear</span>
            <span class="marquee-logo">Notion</span>
            <span class="marquee-logo">Stripe</span>
            <span class="marquee-logo">Supabase</span>
            <span class="marquee-logo">Tailwind</span>
            <span class="marquee-logo">Astro</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Tag marquee — reverse, faster -->
    <div class="marquee-section">
      <div class="marquee marquee--reverse" style="--marquee-duration: 20s" aria-label="Tech tags">
        <div class="marquee__track">
          <div class="marquee__content">
            <span class="marquee-tag">CSS Animation</span>
            <span class="marquee-tag">GSAP</span>
            <span class="marquee-tag">Three.js</span>
            <span class="marquee-tag">Web GL</span>
            <span class="marquee-tag">Framer Motion</span>
            <span class="marquee-tag">Lenis</span>
            <span class="marquee-tag">ScrollTrigger</span>
          </div>
          <div class="marquee__content" aria-hidden="true">
            <span class="marquee-tag">CSS Animation</span>
            <span class="marquee-tag">GSAP</span>
            <span class="marquee-tag">Three.js</span>
            <span class="marquee-tag">Web GL</span>
            <span class="marquee-tag">Framer Motion</span>
            <span class="marquee-tag">Lenis</span>
            <span class="marquee-tag">ScrollTrigger</span>
          </div>
        </div>
      </div>
    </div>

  </div>

</body>
</html>

Infinite Marquee / Ticker

A performant infinite scrolling ticker using CSS @keyframes and translateX. Content items are duplicated in the DOM to create a seamless loop — no JavaScript animation loop required.

How it works

The marquee track holds two identical sets of items side by side. The animation translates the track by -50% (one full copy width), then loops. Since both copies are identical, the transition is seamless.

[ A B C D E ] [ A B C D E ]
←── translateX(-50%) ───────

Features

Pause on hover — animation-play-state: paused
Reverse direction — add .marquee--reverse class for RTL scroll
Speed control — --marquee-duration CSS variable
Gap control — --marquee-gap CSS variable
Respects prefers-reduced-motion

When to use it

Logo / partner strips
Live news or status tickers
Announcement banners