Infinite Marquee
ProSeamless CSS infinite scroll ticker with pause-on-hover, direction, and speed control.
Marquee · primitive · basic · css · zero dependencies
infinite-marquee Marquee·preview
Built for the tools you already use
v0LovableCursorBoltClaude CodeWindsurfReplitVercelSupabase
v0LovableCursorBoltClaude CodeWindsurfReplitVercelSupabase
backgroundsbuttonscardstextbordersloadersmarqueeeffects
backgroundsbuttonscardstextbordersloadersmarqueeeffects
speed 34 left · speed 46 right · pauses on hover
Infinite Marquee
Seamless CSS infinite scroll ticker with pause-on-hover, direction, and speed control.
Use it for
- customer logo cloud
- testimonial ticker
- tech stack and integrations row
- announcement bar ticker
- press mentions strip
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Items to scroll — logos, cards, or text, rendered once and duplicated internally. |
className | string | — | Additional classes for the outer container. |
direction | "left" | "right" | "left" | Scroll direction. |
speed | number | 40 | Seconds per full loop — higher is slower. |
pauseOnHover | boolean | true | Pauses the scroll animation while the pointer is over the marquee. |
gap | number | 16 | Spacing between items in pixels. |
FAQ
Does Infinite Marquee work with Next.js App Router?
Yes. It's a "use client" React component and works as a client component in the App Router.
Are there any dependencies to install?
None. It's a pure CSS keyframe animation — no external packages required.
Is it responsive?
Yes. Items wrap in a flex row with a configurable gap, and the edge fade uses a CSS mask so it looks clean at any container width.
Does it respect prefers-reduced-motion?
Yes, built in. A @media (prefers-reduced-motion: reduce) rule sets animation: none on the scrolling track, so the marquee stops for users with that OS preference.