Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Slow Sixty Second Single Marquee Logos Block for React Aria

The calmest logo loop: fourteen customer wordmarks of outdoor shops drift past in one row in sixty seconds, with wide gaps, no heading and only a pause button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A slow logo marquee for React with React Aria. Fourteen customer wordmarks from walking clubs and outdoor shops move past in one unbroken row, one full turn in sixty seconds, with four rem between them and a soft fade at both ends. There is no heading and no sentence: a pause button at the start of the row is the only control, and the strip rests on the page's top rule and nothing else. It is a block for the quiet space under a hero or above a footer, where the logos should add up to an impression and not be read one by one. Built from Marquee, Button and Guides, with your theme's tokens for every colour. Each wordmark is real text in its own lettering with an icon, muted until hovered.

FAQ

How do I change the speed?

The speed prop on Marquee is pixels per second. The row is about 2,280 px wide at 1280 px, so speed={38} gives sixty seconds for a full turn. Divide the row's width by the seconds you want. The row's width changes with the customers, the spacing and the lettering.

How do I change the customers?

Edit CUSTOMERS at the top of the file: a name, a Lucide icon, a lettering and a mark (inline, badge, ring or trailing). Add as many as you like; the marquee repeats the row as often as the screen needs.

How does it stop?

With the pause button (a toggle with aria-pressed), by hovering the row, by moving keyboard focus into it, and with the visitor's reduced-motion setting, which stops the loop, hides the button and lets the row scroll by hand.

How is it marked up for screen readers?

The marquee is named "Customers of Cairnbook". The first copy of the row is the real content, each wordmark's name as text with a decorative icon; the repeated copies are hidden from assistive technology and can't be focused. The wordmarks are not links.

What changes on a phone?

Nothing: it is the same single row, with the pause button at its start. The gaps and the speed stay the same, so a phone shows fewer customers at once.

All 100 logos blocks