InfiniteMovingCards
A CSS-only auto-scrolling carousel for displaying cards in a continuous loop.
Loading...
Basic Usage
import { InfiniteMovingCards } from "@corew500/ui"
const items = [
{ id: 1, content: <Card>Item 1</Card> },
{ id: 2, content: <Card>Item 2</Card> },
{ id: 3, content: <Card>Item 3</Card> },
]
<InfiniteMovingCards items={items} />Direction
// Scroll left (default)
<InfiniteMovingCards items={items} direction="left" />
// Scroll right
<InfiniteMovingCards items={items} direction="right" />Speed
<InfiniteMovingCards items={items} speed="slow" /> // 80s
<InfiniteMovingCards items={items} speed="normal" /> // 40s (default)
<InfiniteMovingCards items={items} speed="fast" /> // 20sPause on Hover
<InfiniteMovingCards items={items} pauseOnHover />Testimonials Example
const testimonials = [
{
id: 1,
content: (
<Card>
<CardContent>
<p>"Great product!"</p>
<p className="text-muted-foreground">- Customer A</p>
</CardContent>
</Card>
),
},
// ... more testimonials
]
<InfiniteMovingCards
items={testimonials}
speed="slow"
pauseOnHover
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pauseOnHover | enum | true | Pause the animation when hovering over the container |
| duplications | number | 2 | Number of times to duplicate the content (default: 2) |
| direction | enum | left | — |
| speed | enum | normal | — |
| variant | enum | default | — |
Design Tokens
| Token | Description |
|-------|-------------|
| --infinite-cards-gap | Gap between cards |
| --infinite-cards-duration-slow | Slow speed duration |
| --infinite-cards-duration-normal | Normal speed duration |
| --infinite-cards-duration-fast | Fast speed duration |
Accessibility
- Uses
aria-hiddenon duplicate items to prevent screen reader repetition - Animation respects
prefers-reduced-motionmedia query