Infinite Moving Cards

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

Motion Effectslayouthoverspringcarouselmarqueetestimonialslogoscards

Infinite Moving Cards

Motion-ready templates

Seamless loops that keep content dynamic without visual jumps.

★★★★★

Testimonials

Ariana

Product lead

Smooth and performant

Linear marquee motion with hover pause for better readability.

★★★★★

Framer Motion

Marcus

Frontend engineer

Built for launch pages

Use for logo strips, reviews, case studies, and showcase rails.

★★★★

Marketing

Lena

Design manager

Motion-ready templates

Seamless loops that keep content dynamic without visual jumps.

★★★★★

Testimonials

Ariana

Product lead

Smooth and performant

Linear marquee motion with hover pause for better readability.

★★★★★

Framer Motion

Marcus

Frontend engineer

Built for launch pages

Use for logo strips, reviews, case studies, and showcase rails.

★★★★

Marketing

Lena

Design manager

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 premium 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

Installation