Marquee

Infinite scrolling content strip. Content is automatically duplicated for seamless looping. Respects prefers-reduced-motion.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to scroll (duplicated internally for seamless looping)
`speed`	`number`	`50`	Scroll speed in pixels per second
`direction`	`'left' \| 'right' \| 'up' \| 'down'`	`'left'`	Scroll direction
`pauseOnHover`	`boolean`	`true`	Pause scrolling on hover
`gap`	`number \| string`	`0`	Gap between original and duplicated content
`autoStart`	`boolean`	`true`	Start on mount
`className`	`string`	—	Container className
`style`	`CSSProperties`	—	Container style

Ref Handle

Method	Description
`start()`	Start or resume the scrolling animation
`pause()`	Pause the scrolling animation

Example


<Marquee speed={60} pauseOnHover>
  <span>Free shipping on all orders</span>
  <span>Use code SAVE20 for 20% off</span>
  <span>Limited time offer</span>
</Marquee>