Free Marquee Component for React — Infinite Scroll Logos & Text
Discover the best free marquee React component for infinite scroll logos, testimonials, and text — styled across 40 visual themes with zero dependencies.
What Is a Marquee Component in React?
A marquee component in React is a horizontally (or vertically) scrolling container that loops its children infinitely — perfect for logo tickers, partner strips, testimonial carousels, and announcement banners. Unlike the deprecated HTML <marquee> tag, a modern React marquee is built with CSS animations or the Web Animations API, giving you full control over speed, direction, pause-on-hover, and responsive behaviour.
The pattern is everywhere on modern landing pages: a row of brand logos sliding left on a loop signals social proof without requiring the user to do anything. Because the animation is purely declarative in CSS, it stays smooth at 60 fps even on lower-end devices, costs nothing in JavaScript execution after mount, and is easily paused with a single class toggle.
Empire UI ships a production-ready Marquee component as part of its free component library. It works out of the box with Tailwind CSS, supports all 40 visual styles (glassmorphism, neobrutalism, claymorphism, and more), and integrates with the MCP server for AI-native generation straight into your editor.
Installing and Using the Empire UI Marquee
Getting started takes under two minutes. Install the Empire UI package, then import the Marquee component directly — no extra peer dependencies required beyond React and Tailwind CSS.
``bash
npm install empire-ui
# or
pnpm add empire-ui
``
Once installed, drop the component into any page or layout file. The items prop accepts any array of React nodes — images, <img> tags, SVGs, or custom cards. The speed prop controls animation duration in seconds, and pauseOnHover adds a CSS animation-play-state: paused rule when the user mouses over the strip.
``tsx
import { Marquee } from 'empire-ui';
const logos = [
<img key="vercel" src="/logos/vercel.svg" alt="Vercel" className="h-8" />,
<img key="stripe" src="/logos/stripe.svg" alt="Stripe" className="h-8" />,
<img key="figma" src="/logos/figma.svg" alt="Figma" className="h-8" />,
<img key="linear" src="/logos/linear.svg" alt="Linear" className="h-8" />,
];
export default function LogoStrip() {
return (
<Marquee
items={logos}
speed={30}
gap={48}
pauseOnHover
className="py-6"
/>
);
}
``
The component automatically duplicates the items array to create a seamless loop — no manual cloning required. Changing the direction prop to 'right' reverses the scroll, which is useful when stacking two rows for a dynamic social-proof section.
Customising the Marquee Across 40 Visual Styles
One of Empire UI's defining strengths is its 40-theme token system. Every component, including the Marquee, reads design tokens for background, border, shadow, and blur — so switching from a glassmorphism frosted-card style to a neobrutalism bold-border style is a single prop change or a Tailwind class swap. Visit the style explorer to preview how the Marquee looks in every theme.
For a glassmorphism logo strip, wrap the Marquee in a glass-card container and set a semi-transparent background on each logo slot. For neobrutalism, add a thick black border and a hard box shadow using the shadow-brutal utility. The templates gallery includes industry-specific landing pages where the Marquee is already wired up in context — SaaS, agency, portfolio, and e-commerce layouts.
You can also render the Marquee vertically by combining direction='down' with a fixed height prop, which is ideal for scrolling testimonial cards in a sidebar. Pair this with Empire UI's custom cursors for a premium interactive feel — the cursor reacts to hover state while the marquee pauses beneath it.
Performance Tips for an Infinite Scroll Marquee
The most common performance mistake with marquee components is using JavaScript setInterval to move elements, which causes layout thrash on every tick. Empire UI's Marquee uses a pure CSS `@keyframes` translate animation — the browser compositor handles it on the GPU thread, completely off the main thread. This means zero jank even when other heavy React re-renders are happening on the page.
Keep logo images as SVGs or WebP files and set explicit width and height attributes so the browser reserves layout space before paint. Lazy-loading marquee images with loading='lazy' is counterproductive because they are above the fold; instead, use <link rel='preload'> for the first visible images in the strip.
If you have many items (20+), enable the clone={1} prop default and avoid setting it higher — doubling the items once is enough for a seamless loop. More clones only add DOM nodes and increase memory usage. For very large datasets, consider virtualising the list or limiting the rendered items to a visible window using Empire UI's built-in maxVisible cap.
Use the performance audit tool in the Empire UI dashboard to profile your marquee scroll FPS alongside your other animated components and catch regressions before they ship.
Accessibility and SEO Considerations
An auto-scrolling strip can be disorienting for users with vestibular disorders. The Empire UI Marquee component respects `prefers-reduced-motion` out of the box — when the OS setting is active, the animation pauses and the items are displayed as a static row. You can verify this behaviour in any browser's DevTools by emulating the reduced-motion media query.
For screen readers, moving text is problematic. Wrap each item in an aria-label and use role='list' / role='listitem' on the container and items respectively. Because logos are typically decorative, an alt='' on purely decorative images tells screen readers to skip them — but named partner logos should carry a meaningful alt that describes the brand.
From an SEO perspective, logo text and alt attributes inside the marquee are crawled by Googlebot. Use real brand names and concise descriptions. Avoid stuffing keywords into alt text — natural descriptions such as alt='Stripe payment processing' are better than alt='stripe stripe logo payment'. The blog has a full article on image SEO best practices for animated components.
Real-World Use Cases and Empire UI Templates
The infinite marquee pattern solves several common product design problems at once. A social proof strip above the fold converts visitors before they scroll. A tech stack ticker on a portfolio or agency site communicates capabilities instantly. A news ticker or announcement bar at the top of a dashboard keeps users informed without taking up permanent real estate.
Empire UI's templates include a SaaS landing page where the Marquee is pre-configured with a glassmorphism background, 12 partner logos, and a gradient fade on both edges — created with the CSS mask-image linear-gradient trick so logos appear to dissolve into the page rather than hard-clip. You can generate a customised version in seconds using the MCP server by describing your brand colours and logo set in plain English.
For e-commerce, a Marquee showing real-time purchase notifications or scrolling product categories drives urgency and discovery. Combine it with the aurora background or shooting stars components from Empire UI for a hero section that genuinely stands out — all free, all composable, all consistent across 40 visual styles.
FAQ
Empire UI's Marquee component is the leading free option — it uses pure CSS animations for GPU-accelerated performance, supports 40 visual styles, and includes pauseOnHover, direction, and gap controls. It requires no additional dependencies beyond React and Tailwind CSS.
Import the Empire UI Marquee component, pass your logo images as an array to the items prop, and set a speed value in seconds. The component automatically duplicates the items to create a seamless infinite loop without any manual cloning.
Yes — Empire UI's Marquee is built on Tailwind utility classes and reads the same design token layer as all other Empire UI components. You can apply any Tailwind class via the className prop for custom spacing, backgrounds, or borders.
Pass the pauseOnHover boolean prop to the component. Empire UI implements this with a CSS animation-play-state: paused rule on the wrapper's :hover selector — no JavaScript event listeners needed, so it is performant and works on touch devices via the :focus-within fallback.
Yes. The component includes a built-in @media (prefers-reduced-motion: reduce) rule that stops the animation and renders the items as a static row. You should still add meaningful alt text to logo images so screen readers can announce the partner brands correctly.