About this block
A strip of logos that scrolls sideways on a loop, the "trusted by" or "as seen in" band you see under a lot of hero sections. Logos start grey and half-faded so they don't compete with your headline, and turn full colour when someone hovers over one. Hovering also pauses the scroll so people can read a name.
When to use it
- Under a hero, to show clients, partners, press mentions, or integrations at a glance.
- When you have more logos than fit in one row. A static grid is better for 3 or 4.
- On agency, SaaS, and B2B sites where who you work with is the main proof.
What's inside
- A full-width strip holding six logos, animated with the built-in Marquee animation (right to left, continuous).
- The six logos appear twice, back to back, so the loop never shows a gap or a jump at any screen width.
- Logos sit on small rounded tiles at 50% opacity in greyscale, and turn to full colour on hover.
- Hovering anywhere on the strip pauses the animation.
- Visitors who turn on reduced motion in their system settings get a still row instead of a moving one.
How to customize it
- Replace each image with your own logo from the media library. SVG or transparent PNG looks cleanest on the tiles.
- Make the same change in both logo groups (Logos and Logos (repeat)). The second copy is what makes the loop seamless, and screen readers skip it.
- Fill in the alt text with each company's name, so screen readers and search engines know whose logos these are.
- Switch the Track's animation to Marquee Slow if the scroll feels busy, or remove the greyscale classes to show logos in colour all the time.
Questions
- Can I use this for text instead of logos?
- Yes, but swap the gap between items for a right margin on each item. Otherwise the loop jumps by half a gap each time it repeats.
- Is a moving logo strip bad for accessibility?
- It pauses on hover and stops for anyone who has reduced motion turned on. Keep it short and away from body text people are reading.
- How many logos should I add?
- Six to twelve. Fewer than that, use a static row. More than that, the strip takes too long to cycle.