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 https://ui.aceternity.com/registry/infinite-moving-cards.json

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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro

Manu is a genius. He is open-minded, curious and deeply invested in the projects he chooses to work on. He takes your vision and brings it to life -- and is a true partner in th...

Meru Gokhale

Founder at Editorially, Editrix