Vertical Marquee Testimonials Block for React

Yes, three ways. The pause button in the header row stops every lane and becomes a play button; it is a toggle, so its state is announced. The lanes also pause while the pointer is over them or keyboard focus is inside, so a note can be read in peace. And with reduced motion on, they never move: the button is hidden and each lane becomes a plain scrollable list.

Edit LANES at the top of the file. Each lane has its quotes, a speed in pixels per second, reverse to run it the other way, a label that names the lane for screen readers and appears, the class that decides from which width it shows. Give each lane enough quotes to fill the window, since the loop repeats the content to fill it; five notes fill the 30 rem window with room to spare.

Each lane is a named region, Cook notes, first column and so on, and each note is a figure with a blockquote and a figcaption. The copies that make the loop are hidden from screen readers and removed from the tab order, so every quote is read once. Nothing in the notes is focusable, so the keyboard only meets the pause button and the link.

The lanes scroll with a CSS animation that comes from the Marquee component, with no JavaScript frame loop and no animation library. The header and the wall also fade up once on load. With reduced motion on, nothing moves, the fade mask is removed so the first and last notes are fully visible, and each lane scrolls by hand.

It's a link to href="#": point it at your sign-up. It's a ShineButton with render set to an a element and nativeButton={false}. The pause button is a normal button: it uses onClick on Ark, Base UI and Radix and onPress on React Aria.

Below md only the first lane shows, filling the width, in a 24 rem window, then two lanes from md and three from lg in a 30 rem window. The window is a fixed height at every width, so the page never jumps as notes scroll. Lanes that are not shown are not rendered, so they do not run in the background.