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.jsonManual Installation
// Copy the infinite-moving-cards component from the registryProps
Component properties and their types
itemsany[]
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
pauseOnHoverboolean
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
Live Preview
Interactive
Interactive component preview
Amazing component!
John DoeDeveloperLove the animations
Jane SmithDesignerGreat design system
Mike JohnsonProduct Manager