Brand marquee

Logos scroll horizontally at a steady speed — infinitely, never ends. The classic 'as seen in' or 'trusted by' band.

Effects Built

Use when — you have 4+ brand logos to display and want them to feel like a continuous current rather than a static row. Looks slick when the page is otherwise still.

Live demo

Stripe Vercel Linear Anthropic Figma Notion Stripe Vercel Linear Anthropic Figma Notion

CSS

.marquee { overflow: hidden; padding: 14px 0; }
.marquee-track {
  display: flex; gap: 48px;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* shift by exactly half */
}

The critical detail

The HTML must contain the logo list twice. The animation translates left by exactly -50%, which is one full copy of the list. When the loop resets, the second copy is now in the position the first copy was — invisible reset, seamless infinite scroll.

Dials

Speed: 22s for a moderate pace. Slower (40s) reads as luxury. Faster (12s) reads as urgent / tech.

Edge fade: linear-gradient masks on the container edges. Makes logos appear / disappear instead of cutting hard.

Pause on hover: animation-play-state: paused respects users who want to read a particular logo.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.