Marquee

React
import Marquee from "@/components/fx/marquee"

<Marquee label="Customers">
    {logos.map((logo) => <img key={logo.name} src={logo.src} alt={logo.name} />)}
</Marquee>

• Items are exposed once; the looping copy is aria-hidden and inert, so nothing is read or focused twice.
• Pauses on hover and whenever focus is inside; `paused` stops it from a visible control (WCAG 2.2.2).
• Pass `label` to expose it as a named region.
• prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) stops scrolling and wraps the items into a normal row.