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

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 Base UI. 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.

  • Pro

    Inset Dual Marquee Logos

    Multi-row marquees

    Two rows of customer wordmarks for an internal-wiki tool inside an inset card, fading out toward the foot with the call to action sitting over the fade.

  • Pro

    Dual Row Marquee Logos

    Multi-row marquees

    Two rows of customer wordmarks for a camera-security service, scrolling in opposite directions at one calm speed under a centred header, with a button that pauses both.

  • Pro

    Fast and Slow Dual Marquee Logos

    Multi-row marquees

    Two depths of customer wordmarks for a barrel-tracking service: large names drifting slowly in front, small ones three times as fast behind, in opposite directions.

  • Pro

    Dark Inset Single Marquee Logos

    Marquees

    A single row of twelve customer wordmarks for a home-inspection report tool, riding in a raised tray with a pause button, each tile lifting under the pointer.

  • Pro

    Logo Marquee Hero

    Logos and social proof

    A compact hero for a support platform: copy and two calls to action, then two bands across the column: a strip of customer logos that scrolls on its own with a pause button, and a row of three stats.

  • Pro

    Mixed Variants Dual Marquee Logos

    Multi-row marquees

    Two rows of customers of a returns-management service in two kinds of logo: wordmarks on top and icon-only tiles on a tinted band below, moving in opposite directions.

All 100 logos blocks