React CSS Marquee

A lightweight React marquee component powered by CSS animations. Supports horizontal and vertical scrolling, gradient fade edges, pause controls, auto-fill, loop count, and more -- with zero dependencies.

Install

npm install react-css-marquee

Quick start

import { Marquee } from 'react-css-marquee'

<Marquee>
  <img src="logo1.png" />
  <img src="logo2.png" />
  <img src="logo3.png" />
</Marquee>

Examples

Gradient fade edges

Uses CSS mask-image so it works over any background without specifying a color.

<Marquee gradient gradientWidth={200}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Marquee>

Vertical scrolling

<Marquee direction="vertical" style={{ height: 400 }}>
  <p>Line one</p>
  <p>Line two</p>
  <p>Line three</p>
</Marquee>

Sparse scrolling (no repeat)

Items scroll across individually without duplicating to fill the viewport.

<Marquee repeat={false} speed={8}>
  <h2>Breaking news headline</h2>
</Marquee>

Pause on hover

<Marquee isPausedOnHover>
  <Card />
  <Card />
  <Card />
</Marquee>

Drag to scroll

Let users grab and scrub through the marquee content. The animation resumes from where the user left off.

<Marquee draggable>
  <img src="photo1.jpg" />
  <img src="photo2.jpg" />
  <img src="photo3.jpg" />
</Marquee>

Click to toggle pause

<Marquee isPausedOnClick>
  <span>Click anywhere on the marquee to pause / resume</span>
</Marquee>

Finite loop with callback

<Marquee loop={3} onFinish={() => console.log('done')}>
  <span>This plays 3 times</span>
</Marquee>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	--	Content to scroll
`className`	`string`	--	CSS class for the container element
`delay`	`number`	`0`	Delay before animation starts, in seconds
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction
`draggable`	`boolean`	`false`	Let users grab and drag to scrub through the marquee. Animation resumes on release
`repeat`	`boolean`	`true`	Duplicate children to fill the viewport for a seamless loop. Set `false` for spaced-out items that scroll across individually
`gap`	`number`	`40`	Gap between items in pixels
`gradient`	`boolean`	`false`	Fade out edges with a gradient overlay
`gradientWidth`	`number \| string`	`200`	Width of the gradient fade zone (number for px, string for any CSS unit)
`isPaused`	`boolean`	`false`	Pause the animation
`isPausedOnClick`	`boolean`	`false`	Click the marquee to toggle between paused and running
`isPausedOnHover`	`boolean`	`false`	Pause when hovering over the marquee
`isPausedOnMouseDown`	`boolean`	`false`	Pause while the mouse button is held down on the marquee
`loop`	`number`	`0`	Number of times to play the animation. `0` means infinite
`onCycleComplete`	`() => void`	--	Called each time the animation completes one cycle
`onFinish`	`() => void`	--	Called when a finite loop animation ends
`reverse`	`boolean`	`false`	Reverse the scroll direction
`speed`	`number`	`10`	Animation duration in seconds (higher = slower)
`style`	`CSSProperties`	--	Inline styles for the container element

Accessibility

The component automatically pauses animation when the user has prefers-reduced-motion: reduce enabled. Duplicate items rendered for the seamless loop are marked with aria-hidden to prevent screen readers from reading them multiple times.

License

MIT