Infinite Marquee React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import InfiniteMarquee from "./InfiniteMarquee";

export default function Example() {
  return (
    <InfiniteMarquee
      items={[
        "✳ Design",
        "↗ Build",
        "⌘ Create",
        "◇ Explore",
        "✳ Repeat"
      ]}
      duration={25}
      gap={48}
      reverse={false}
      pauseOnHover={true}
      fade={true}
    />
  );
}

Using Infinite Marquee

Pass items directly or use renderItem to produce your own markup. gap controls spacing while duration controls the time taken by the loop.

Use reverse to change direction and pauseOnHover when the contents need time to inspect. Give the collection a descriptive label.

Props

Name	Type	Required	Default	Description
items	string[]	No	[]	Content supplied by your application.
renderItem	function	No	undefined	Optional (item, index) renderer. Use to supply cards, logos, or links.
duration	number	No	25	Loop duration
gap	number	No	24	Item gap
reverse	boolean	No	false	Reverse direction
pauseOnHover	boolean	No	true	Pause on hover
fade	boolean	No	true	Fade edges
label	string	No	"Scrolling collection"	Accessible or visible label for this component.
className	string	No	""	Additional CSS class names, merged with base component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.