Infinite Moving Cards

v1.0.0
Animation

An animated component that displays cards in continuous motion.

Dependencies

framer-motion
Installation
Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/infinite-moving-cards.json

Manual Installation

// Copy the infinite-moving-cards component from the registry
Props
Component properties and their types
items
any[]
default: []

Array of items to display in cards

direction
'left' | 'right'
default: 'left'

Direction of the animation

speed
'fast' | 'normal' | 'slow'
default: 'normal'

Animation speed

pauseOnHover
boolean
default: true

Whether to pause animation on hover

Examples
Code example for this component

Testimonials Carousel

import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards"

const testimonials = [
  {
    quote: "This product has transformed our workflow completely.",
    name: "John Doe",
    title: "CEO, Company Inc",
  },
  {
    quote: "Amazing experience and great customer support.",
    name: "Jane Smith",
    title: "Designer, Studio XYZ",
  },
  // Add more testimonials...
]

export function InfiniteMovingCardsDemo() {
  return (
    <div className="h-[40rem] rounded-md flex flex-col antialiased bg-white dark:bg-black dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden">
      <InfiniteMovingCards
        items={testimonials}
        direction="right"
        speed="slow"
      />
    </div>
  )
}

Registry

View the component registry file

View Registry
Live Preview
Interactive
Interactive component preview
  • Amazing component!
    John DoeJohn DoeDeveloper
  • Love the animations
    Jane SmithJane SmithDesigner
  • Great design system
    Mike JohnsonMike JohnsonProduct Manager