Marquee with Pause on Hover

The beUI React marquee repeats a row or column of children in a continuous CSS loop. Pause on hover is enabled by default, making it a useful starting point for a small logo or testimonial strip.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

Use text labels or logos for secondary social proof below a hero. Keep the same information available as ordinary content if motion would prevent someone from reading it.

Before you copy and paste

Add Marquee and cn from the Code tab. This source relies on the animate-marquee and animate-marquee-vertical utilities from the shared stylesheet. For Tailwind CSS 4, add the CSS below to your global stylesheet.

Listed package dependencies: clsx, react, tailwind-merge.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

A slow logo strip with a static reduced-motion list

import { Marquee } from "@/components/motion/marquee";

const tools = ["GitHub", "Linear", "Figma", "Notion"];

export function ToolStrip() {
  return (
    <section aria-label="Example tools">
      <div className="motion-reduce:hidden">
        <Marquee speed={35} direction="left" gap="2rem" pauseOnHover fade={false}>
          {tools.map((tool) => <span key={tool}>{tool}</span>)}
        </Marquee>
      </div>
      <ul className="hidden flex-wrap gap-8 motion-reduce:flex">
        {tools.map((tool) => <li key={tool}>{tool}</li>)}
      </ul>
    </section>
  );
}

Required animation CSS

@theme {
  --animate-marquee: marquee 30s linear infinite;
  --animate-marquee-vertical: marquee-vertical 30s linear infinite;
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap, 1rem))); }
  }
  @keyframes marquee-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% - var(--gap, 1rem))); }
  }
}

Here speed=35 means a 35-second cycle, so larger values make it slower. The static list is shown when reduced motion is requested; this component does not read the preference itself.

Customization

direction / speed: Direction supports left, right, up and down. Speed is the cycle duration in seconds, not pixels per second. A vertical strip needs a bounded container height.
pauseOnHover / gap / fade: Hover pause defaults to true, gap to 1rem and edge fading to true. Disable fades when they obscure important text or clip small logos.
Children: The source duplicates the track once and marks the second copy aria-hidden and inert. It accepts static React children, without an items or drag-handler API.

Integration notes

Hover pause does not supply a persistent pause button for touch or keyboard users. Add an accessible pause mechanism or use a static list when continuous movement needs to stop.
Use short, nonessential content. A scrolling strip is a poor home for pricing, navigation or instructions someone must act on.
For repeat and CSS duration controls, compare the Magic UI variant. For react-fast-marquee props and composable edge fades, compare the Kibo UI variant below. Their speed settings are not interchangeable.

Component source: beUI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.