Marquee

A seamless horizontal scroller that loops any content forever. Ideal for logo clouds, testimonials, and ticker tapes.

Logo Cloud

Hover to pause. Toggle the direction below.

Direction:

Testimonials

A slower marquee with testimonial cards.

Usage

import { Marquee } from "@mantleui/react/motion";

<Marquee speed={60} direction="left" pauseOnHover>
  {logos.map((logo) => (
    <div key={logo} className="mx-3">
      {logo}
    </div>
  ))}
</Marquee>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to scroll horizontally.
`speed`	`number`	`50`	Scroll speed in pixels per second.
`direction`	`"left" \| "right"`	`"left"`	Scroll direction.
`pauseOnHover`	`boolean`	`true`	Whether to pause the animation on hover.

children

ReactNode

Content to scroll horizontally.

speed50

number

Scroll speed in pixels per second.

direction"left"

"left" | "right"

Scroll direction.

pauseOnHovertrue

boolean

Whether to pause the animation on hover.