Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Speed Picker Dual Marquee Logos Block for React Aria

Two rows of customer wordmarks for a lighting-control service in a raised panel, with a Calm, Normal and Fast speed picker and a pause button at the end of the heading row.

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 two-row logo marquee with controls for React with React Aria. A start-aligned heading and, at its end, a speed picker (Calm, Normal, Fast) beside a pause button; on a phone the controls wrap under the heading. Below, a muted shell with + marks on its corners holds a raised panel with sixteen customer wordmarks in two rows, in opposite directions, divided by a hairline. Choosing a speed changes both rows at once. It's built from Segment Group, Marquee, Frame, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a page that lets visitors tune the motion, or just to show that the strip is calm on purpose.

FAQ

How do I change the speeds?

Edit PACES at the top of the file: each entry is an id, a label and a speed in pixels a second (16, 32 and 64). Add or remove options and the picker follows; Normal is the starting choice, set by the initial paceId. Both rows read the chosen speed.

Is the picker accessible?

It is a Segment Group named "Scroll speed": a radio group you operate with the arrow keys, with the chosen option shown filled. Choosing an option only changes the pace, so nothing is announced and nothing moves focus.

How does it stop?

Four ways: the pause button next to the picker (a toggle with aria-pressed), hovering a row, focusing into a row, and the visitor's reduced-motion setting, which stops both rows and leaves them as rows you can scroll by hand. With reduced motion the pause button is hidden; the picker stays, because it changes nothing visible.

How do I change the customers?

Edit FIRST_ROW and SECOND_ROW: each entry is a Lucide icon, a name, a lettering and a mark. Keep eight or more per row so a row never shows the same logo twice at once.

Is the panel dark?

It follows your theme: no dark scope, so it's light on a light page and dark on a dark one. A muted shell, a shadow and a ring raise the panel in both modes.

How does it fit on a phone?

The picker and the pause button wrap under the heading, and the rows stay marquees at the width of the panel; nothing scrolls sideways at 320 pixels.

All 100 logos blocks