shadcn.io is not affiliated with official shadcn/ui
Triple Row Marquee Logos Block for Ark UI
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 Ark 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.