shadcn.io is not affiliated with official shadcn/ui
Reverse Direction Single Marquee Logos Block for Vue
One row of customer wordmarks for a flight-school scheduler with transport controls in the header: a Forward and Backward switch that turns the row around, and a button that pauses it.
Installation
Overview
A single-row customer marquee with transport controls for Vue with Ark UI. A header row puts the heading and a sentence at the start and, at its end, a segmented Forward and Backward switch and a pause button; on a phone the controls drop under the heading. Below, a ruled band that ends the block holds one row of customer wordmarks that starts out running backward and turns around when you pick Forward. Each customer is an icon and a name in its own lettering. The marquee's looping copies are hidden from screen readers. It's built from Marquee, Segment Group, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a page where the visitor, or a reviewer, should be able to take the moving row in hand.
FAQ
How does the direction switch work?
It's a SegmentGroup named "Direction of the row", with Forward and Backward. The selected value is state in the block, and the Marquee gets reverse when Backward is chosen. Forward is the usual ticker, moving toward the start of the line; Backward moves toward the end. The row starts on Backward, so change useState("backward") for a different default.
How does it stop?
Four ways: the pause button next to the switch (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the reduced-motion setting, which stops the row and leaves it as a row you can scroll by hand. Under reduced motion the switch and the button are hidden, because there is nothing left to steer or pause.
Does the row jump when I change direction?
Yes, a little. The direction is a CSS animation direction, so turning the row around mirrors its position in the loop. The row keeps scrolling from there at the same speed.