Marquee
Infinite horizontal or vertical scrolling strip with pause on hover, reverse, speed control and edge fade.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
MarqueeProps
Also accepts all props of React.ComponentProps<"div">
| Prop | Type | Default | Description |
|---|---|---|---|
| vertical | boolean | false | Scroll vertically instead of horizontally |
| reverse | boolean | false | Reverse the scroll direction |
| pauseOnHover | boolean | true | Pause while hovered or focused |
| duration | number | 40 | Seconds for one full loop at speed 1 |
| speed | number | 1 | Speed multiplier, 2 is twice as fast |
| gap | string | "1rem" | Gap between items, any CSS length |
| repeat | number | 4 | How many times the content is repeated to fill the strip |
| fade | boolean | true | Fade the edges with a mask |
| fadeSize | number | 12 | Size of the edge fade, in percent of the strip |
Install
$ npx shadcn@latest add https://chromotion.dev/r/marquee.json