Infinite Moving Cards — React Component

Customizable infinite marquee of cards with seamless looping, direction controls, hover pause, and optional custom rendering.

Motion Effectslayouthoverspringcarouselmarqueetestimonialslogoscards

Infinite Moving Cards

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

direction

Scroll direction of the marquee track.

speed

Velocity preset for card movement.

pauseOnHover

Pauses track animation while hovered.

cardClassName

Class names applied to each card container.

gap

Spacing in pixels between cards.

loop

Enables seamless infinite looping via duplicated items.

showGradientMask

Shows edge fade masks for polished marquee framing.

Generated JSX

Copy this into your page.

<InfiniteMovingCards
  direction="left"
  speed="normal"
  pauseOnHover={true}
  cardClassName=""
  gap={16}
  loop={true}
  showGradientMask={true}
/>

Animation effects

layouthoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Infinite Moving Cards

Infinite Moving Cards is a horizontally scrolling infinite carousel of cards using duplicated arrays and CSS animation for a seamless loop. The scroll direction, speed, and pause-on-hover behavior are configurable. Gradient fade masks at the leading and trailing edges create a clean fade-out that implies the list continues. Use it for testimonials, logo strips, integration showcases, or any linear collection too long to display in a static grid.

Common use cases

Testimonial and review carousels
Integration and partner logo strips
Feature highlight scrollers
Certification and award displays

Installation