Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Infinite Moving Cards

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

Open in
  • 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

PropTypeDescription
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".
pauseOnHoverboolean If true, the animation will pause when the mouse hovers over it. Default is true.
classNamestring 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

70+ templates and component blocks combined

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

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji