Marquee
Seamless infinite scrolling loop that eases to a stop on hover.
Marquee loops content endlessly: logo walls, testimonials, tickers. GSAP drives a single track with two copies for a seamless loop, and hover eases it to a stop instead of freezing. With motion off it becomes a scrollable row.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/marquee.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/marquee.
Builds on: motion
Usage
import { Marquee } from "@/components/ui/marquee";
<Marquee speed={40}>{logos}</Marquee>Motion
A repeating GSAP tween; hover tweens its timeScale to 0 and back, so it decelerates smoothly.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Marquee
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 40 | Pixels per second. |
| reverse | boolean | false | Direction. |
| pauseOnHover | boolean | true | Ease to a stop on hover. |
| fade | boolean | true | Fade the edges. |
| gap | string | "2.5rem" | Gap between items. |
Accessibility
- The duplicate copy is aria-hidden.
- Reduced motion stops the loop and allows manual scrolling.
FAQ
Also searched as: react marquee · infinite scroll animation · logo carousel · scrolling text · logo marquee