Special/InfiniteMarquee
InfiniteMarquee
Perfectly seamless infinite scroll with gradient edge fade masks. Works with any children — logos, cards, avatars. Zero JavaScript animation overhead — powered by a single CSS keyframe.
import { InfiniteMarquee } from "@animui/ui"Logo wall
Hover to pause. Gradient fades are applied automatically.
Vercel
Linear
Notion
Figma
GitHub
Stripe
Tailwind
Radix
Reverse direction
Vercel
Linear
Notion
Figma
GitHub
Stripe
Tailwind
Radix
Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | "slow" | "normal" | "fast" | number | "normal" | Animation duration. "slow" = 60s, "normal" = 30s, "fast" = 12s. Pass a number for custom seconds. |
direction | "left" | "right" | "left" | Scroll direction. |
pauseOnHover | boolean | true | Pause the animation while the user hovers. |
fade | boolean | true | Show gradient fade masks on the left and right edges. |
fadeWidth | number | 80 | Width of the gradient fade mask in pixels. |
gap | number | 24 | Gap between items in pixels. |
repeat | number | 4 | Number of item-list copies rendered for seamless looping. |
className | string | — | Applied to the outer container. |
itemClassName | string | — | Applied to each repeated item group. |