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

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

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 was such a pleasure to work with. Talented, communicative and fast. Highly recommend!

Jonathan Barshop

Founder at Barshop Studios

A product by Aceternity
Building in public at @mannupaaji