Logo Marquee Hero Block for React

Each entry in LOGOS renders an icon and a name. Replace them with an img or an inline svg of the same height (h-6 w-auto keeps each logo's own proportions), and give an img the company's name as its alt. Single-color SVGs that fill with currentColor pick up text-muted-foreground, so they stay quiet and follow the theme in light and dark. Marquee makes the copies that close the loop and hides them from screen readers, so each logo is announced once.

Set speed on Marquee, in pixels per second: this strip uses 30, a calm pace for words, and the default is 50. Because it's a speed and not a duration, adding logos doesn't make the strip run faster. spacing sets the gap between logos (3rem here), and reverse sends them the other way.

Three ways. The button beside the label pauses and resumes the strip: it's a toggle with aria-pressed that drives Marquee's paused prop. The strip also holds while the pointer is over it or focus is inside it. And with reduced motion turned on in the system, the logos stand still in a row that scrolls by hand, and the pause button is hidden, since there's nothing to pause. That covers WCAG's rule for content that moves on its own for more than five seconds.

Yes. The page has one h1. The strip is a region named "Customer logos" whose names are real text, read once: the copies that make the loop are aria-hidden and inert, so they're neither read nor reached with Tab. The stats are a description list, so each number is read with its label, and the announcement pill is a single link with its full sentence as its name.

The strip spans the column at every width, and its edges fade through a CSS mask rather than a gradient painted in the background colour, so the fade works on any theme and in dark mode. The headline steps down from text-5xl to text-4xl, the two calls to action wrap when the row runs out of room and sit on the first screen, and the three stats stay on one row down to 320px.

Use the marquee when you have ten or more customers to show and want to say "many" without the height of a grid: the motion draws the eye and suggests a long list. Use a static grid, like the logo cloud hero, when you have six to eight well-known names that each deserve a steady look, or when the logos link somewhere.