Marquee
Loops content infinitely on its own, supporting any nodes, horizontal and vertical directions, reverse playback and hover-to-pause, while respecting reduced-motion preferences.
ReactTypeScriptMotionWebGLThemingAccessibility
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to loop, any node |
direction | 'left' | 'right' | 'up' | 'down' | 'left' | Direction the content travels in |
duration | number | 20 | Seconds for one full loop; a larger value scrolls slower |
repeat | number | 2 | Minimum number of copies; the actual count auto-expands to fill the container |
gap | number | 0 | Spacing between each copy of the content (px) |
infinite | boolean | true | Whether to repeat forever; when off, plays a single pass |
pauseOnHover | boolean | true | Whether to pause while hovered |
className | string | — | Extra class name |