Left-Right CTA with Customer Results Belt Block for React

Edit RESULTS at the top of the file. Each entry has an icon, a name, a metric such as "38%" and an outcome that finishes the sentence. Swap the icon and name for an img or inline svg of the customer's logo, with their name as alt, and only use results the customer has agreed you can publish. Nine entries fill a belt well, and Marquee makes the copies that close the loop.

Three ways. The button before the belt pauses and resumes it; it is a toggle with aria-pressed driving Marquee's paused prop. The belt also holds while the pointer is over it or focus is inside it. And with reduced motion turned on in the system, the belt doesn't scroll by itself, it becomes a row you scroll by hand, and the pause button is hidden since there is nothing to pause. That covers WCAG's rule for content that moves on its own for more than five seconds.

Yes. The block's one heading is an h2. The belt is named "Customer results", each chip is plain text read once, and the copies that make the loop are hidden from screen readers and inert, so they aren't read or reached with Tab. The figures are wrapped in bdi, so "38%" and "2.4x" keep their order in right-to-left languages, and the divider between name and result is decorative and hidden. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Set speed on Marquee in pixels per second; this belt uses 35, a calm pace for sentences, and the default is 50. Because it is a speed and not a duration, adding chips doesn't make it run faster. spacing sets the gap between chips, and reverse sends them the other way.

Below md the top band stacks: the headline first, then the buttons, which wrap if they must. The pause button and the belt share one row down to 320px, with the belt taking the remaining width and fading at its edges through a CSS mask, so the fade works on any theme and in dark mode.

Use it when you have results you can publish: a figure next to a name is a claim, which persuades more than a name alone. Use a plain logo strip, like the logo marquee hero, when you only have permission to show names, or when the logos themselves are the proof.