Dual Row Marquee Testimonials Hero Block for React

Yes. The pause button at the end of the band's caption row stops both rows at once and swaps to a play icon, with aria-pressed saying which state it is in. The rows also hold still while the pointer or keyboard focus is on them, and they stop on their own for visitors who ask for reduced motion, in which case the pause button is hidden because there is nothing to pause.

They are the TOP_ROW and BOTTOM_ROW arrays: an initials badge, a name, a one-sentence quote and a role. Keep each quote to one or two lines, since every card in a row shares one width, and use real customers with their permission. Seven cards per row fill the loop on a wide screen; the marquee repeats them so it never shows a gap.

Each review is a figure with a blockquote and a figcaption naming the author. Each row is a labelled marquee, and the repeated copies the loop uses are hidden from assistive technology, so every review is announced once. The initials avatars are decorative.

The ShineButton is the only primary control: a diagonal band of light sweeps across it once on hover or focus. It is a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. The second action is an outline Button.

They are the drafting rails shared with every block in this set: two side rails and a top rule that runs to the edges of the page, with + marks where they cross, then a second rule with marks that starts the review band. The lines follow the theme, in light and dark.

The headline steps down to text-4xl, the two buttons wrap, and the rows keep scrolling at their normal size, with a card wide enough to show most of its quote and the next one peeking in at the edge. The first screen holds the headline and the primary button.