Infinite Text Marquee

An elegant, performance-friendly infinite marquee. This component duplicates the content to ensure a seamless loop. It's built with minimal React logic and relies heavily on CSS transforms for 60fps performance, making it ideal for hero sections or displaying client logos.

ReactCSSTailwind

NEXT.JSREACTTAILWINDFRAMERTYPESCRIPTNODE.JS

Installation

npm install tailwind-merge clsx

Code

// tailwind.config.js extension:
// animation: { marquee: 'marquee 25s linear infinite' }
// keyframes: { marquee: { '0%': { transform: 'translateX(0%)' }, '100%': { transform: 'translateX(-100%)' } } }

export const Marquee = ({ children, reverse = false }) => {
  return (
    <div className="flex w-full overflow-hidden [--duration:20s] [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]">
      <div className={clsx("flex min-w-full shrink-0 animate-marquee items-center justify-around gap-10", reverse && "[animation-direction:reverse]")}>
        {children}
      </div>
      <div aria-hidden="true" className={clsx("flex min-w-full shrink-0 animate-marquee items-center justify-around gap-10", reverse && "[animation-direction:reverse]")}>
        {children}
      </div>
    </div>
  );
};