Infinite Moving Cards
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { InfiniteMovingCards } from "@corew500/ui/infinite-moving-cards"
<InfiniteMovingCards>Content</InfiniteMovingCards>Variants
infiniteMovingCardsVariants
| Axis | Values | Default |
|---|---|---|
| direction | leftright | left |
| speed | slownormalfast | normal |
infiniteMovingCardsContainerVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultfaded | default |
infiniteMovingCardItemVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
API Reference
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 | — |
Accessibility
Screen Readers
- - Duplicated content uses `aria-hidden="true"` to prevent repetition.
Additional
- Consider providing a static alternative for users who prefer reduced motion.
- Animation respects `prefers-reduced-motion` system preference.
Localization
Translatable Content
- - All card content should be translated before passing to components.
- No built-in text; localize children content as needed.