Loop

Showreel Marquee

A seamless infinite marquee for logo rows and showreels. The track is duplicated and translated by exactly half its width so the loop never seams, and it pauses on hover for legibility.

Open in Figma ↗

What's included

Framework-free CSS marquee
React wrapper example
Source Figma file

The code

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 20s linear infinite;
}

.marquee:hover { animation-play-state: paused; }

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