shadcn.io is not affiliated with official shadcn/ui
Triple Row Marquee Logos Block for React
Three rows of customer wordmarks for a carbon-credit registry, alternating direction, with a larger, darker, quicker middle row between two smaller, quieter, slower ones.
Installation
Overview
A three-row customer marquee for React with Base UI. A centred heading says how many companies retire their credits through the product, with a button under it that pauses the scrolling and says what it will do. Below, three ruled bands end the block; the rows alternate direction and sit at two depths: the middle row is larger, in the foreground colour and quicker, the outer two smaller, muted and slow, with a longer fade at their ends. Each customer is an icon and a name in its own lettering. The marquees' looping copies are hidden from screen readers. It's built from Marquee, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a page that wants a wall of logos with some movement and depth, without a grid.
FAQ
How do I change the customers?
Edit FAR_ABOVE, NEAR and FAR_BELOW at the top of the file: each entry is an icon, a name, the lettering classes and where the icon sits (mark). LANES says which list goes where, in top-to-bottom order. Give each customer its own lettering so the rows don't read as one font.
How is the depth made?
With size, colour and speed, never with opacity, so the text stays readable. Each entry in LANES has a tone (height, type size and colour), a speed and a mask (how far the ends fade). The middle row is text-lg in the foreground colour at 34 pixels per second, the outer two text-sm and muted at 16, so the middle row looks closer.
How do the rows stop?
Four ways: the button under the heading, whose label changes between "Pause the rows" and "Resume the rows", hovering a row, moving keyboard focus into one, and the reduced-motion setting, which stops all three rows and leaves each as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.
Which way does each row run?
The first and third rows run toward the start of the line and the middle row the other way, with the reverse prop on its Marquee. In a right-to-left layout the rows follow the page's direction, so they swap sides with it.
Related
- Pro
Dual Row Marquee Logos
Multi-row marqueesTwo 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 marqueesTwo 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
Single Row Marquee Logos
MarqueesA centred heading for a secure-messaging tool over one row of large customer wordmarks in a ruled band, with a pause button in a cell of its own at the end.
- Pro
Row Labels Dual Marquee Logos
Multi-row marqueesTwo rows of customers of a factory-scheduling service, each a band with an Aerospace or Automotive label cell at the start, divided from the moving logos by a hairline.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- Pro
Logo Marquee Hero
Logos and social proofA 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.