Infinite Marquee

Pro

Seamless 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.

Pro component

Join the waitlist to unlock all 14 components at launch.

Join the Pro waitlistor join free for 5 components at launch
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.