AnimationsNew
Marquee
An endless strip of cards or logos that loops seamlessly and can pause on hover.
Customize
color
accentColor
highlightColor
Based on Marquee (MIT license) · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What to scroll: cards, logos, testimonials. |
| duration | number | 40 | Seconds per loop. Lower is faster. |
| reverse | boolean | false | Scroll in the opposite direction. |
| pauseOnHover | boolean | false | Pause the strip on hover. |
| vertical | boolean | false | Scroll vertically instead of sideways. |
| repeat | number | 4 | Copies of the content in the strip, so there are no gaps. |
| color | string | "#ffffff" | Main colour. Children read it as var(--marquee-c1). |
| accentColor | string | "#a3a3a3" | Second colour. Children read it as var(--marquee-c2). |
| highlightColor | string | "#ffffff" | Light highlight colour. Children read it as var(--marquee-c3). |
| className | string | — | Wrapper classes. Set the gap with [--gap:2rem]. |
Dependencies
2 required packages
npm install clsx tailwind-merge