Infinite Moving Cards

A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.
Charles DickensA Tale of Two Cities
To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.
William ShakespeareHamlet
All that we see or seem is but a dream within a dream.
Edgar Allan PoeA Dream Within a Dream
It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.
Jane AustenPride and Prejudice
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
Herman MelvilleMoby-Dick

Installation

Run the following command

npx shadcn@latest add @aceternity/infinite-moving-cards

Choose your Tailwind CSS version

Add the required animation to your CSS file

globals.css

@import "tailwindcss";
 
@theme inline {
  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
 
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
}

Props

Prop	Type	Description
`items`	`{ quote: string; name: string; title: string; }[]`	An array of objects, each containing a quote, name, and title.
`direction`	`"left" \| "right"`	The direction of the animation. Default is "left".
`speed`	`"fast" \| "normal" \| "slow"`	The speed of the animation. Default is "fast".
`pauseOnHover`	`boolean`	If true, the animation will pause when the mouse hovers over it. Default is true.
`className`	`string`	Optional additional CSS classes to apply to the component.

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access