sections

LogoMarquee

Infinite scrolling logo/brand strip with CSS animation. Supports pause on hover and reduced motion.

v1.0.0react >=18next >=14tailwind >=4

marqueelogosscrollbrandspartnersinfiniteticker

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Logo or brand elements to scroll
`speed`	`number`	`30`	Seconds for one complete scroll cycle. Lower = faster.
`pauseOnHover`	`boolean`	`true`	Pause scrolling when the user hovers
`direction`	`string`	`left`	Scroll direction
`className`	`string`	`—`	Additional Tailwind classes for the outer container
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Logo or brand elements to scroll. Automatically duplicated for seamless loop.

Layout

Display: flex

Responsive: Yes

Full-width scrolling strip. Overflows hidden. Children duplicated for seamless loop.

Examples

Basic logo strip

<LogoMarquee>
  <img src="/logos/a.svg" alt="Company A" className="h-8 mx-8" />
  <img src="/logos/b.svg" alt="Company B" className="h-8 mx-8" />
  <img src="/logos/c.svg" alt="Company C" className="h-8 mx-8" />
</LogoMarquee>

Fast reverse scroll

<LogoMarquee speed={15} direction="right">
  {techLogos.map((logo) => (
    <img key={logo.name} src={logo.src} alt={logo.name} className="h-6 mx-6 opacity-50 hover:opacity-100 transition-opacity" />
  ))}
</LogoMarquee>

No pause on hover

<LogoMarquee pauseOnHover={false} speed={40}>
  <span className="mx-8 text-neutral-500">Partner 1</span>
  <span className="mx-8 text-neutral-500">Partner 2</span>
  <span className="mx-8 text-neutral-500">Partner 3</span>
</LogoMarquee>

AI Usage Hint

Use LogoMarquee for scrolling partner logos, tech stack icons, or client brands. Pass logo elements as children. Adjust speed (seconds per cycle — lower = faster). Enable pauseOnHover for accessibility. Respects prefers-reduced-motion.

Works Well With

FadeIn