Logo Marque
A smooth infinite scrolling logo strip built with React and react-fast-marquee. It continuously scrolls logos with configurable speed, direction, and pause interactions—perfect for showcasing partners, tools, or tech stacks in a clean and dynamic way.Props
| Prop | Type | Default | Description |
|---|
| logos | Array | - | Array of logos to display. Each item should contain { logo } (React node). |
| className | string | "" | Additional Tailwind classes for wrapper container. |
| pauseOnHover | boolean | false | Pauses scrolling when user hovers over the marquee. |
| pauseOnClick | boolean | false | Pauses scrolling when marquee is clicked. |
| direction | "left" | "right" | "left" | Direction of scrolling animation. |
| speed | number | 50 | Controls the speed of scrolling. |
| delay | number | 0 | Delay before the marquee animation starts (in seconds). |
| gradient | boolean | false | Adds a fade gradient effect on edges. |
| gradientColor | string | "#000000" | Color of the gradient overlay. |
| gradientWidth | number | 10 | Width of the gradient effect (px). |
| gap | number | 2 | Horizontal spacing between logos (Tailwind margin scale). |
Dependencies
react-fast-marqueeCLSXTailwind Merge