Early price: everything for $99, lifetime

Components

Marquee

Pro

Installation

ProRequires a Planes Pro license.
pnpm dlx shadcn add @useplanes/marquee

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 164 Pro components · lifetime updates.

I have a licenseGet Pro
import { Marquee } from "@/components/ui/Marquee";

<Marquee speed={40} pauseOnHover="slow" fade>
  {logos.map((l) => <Logo key={l.id} {...l} />)}
</Marquee>

Examples

Two opposing rows

Compose rows; each Marquee owns its own frame loop and pauses when scrolled out of view or the tab is hidden.

<Marquee speed={40}>{cards}</Marquee>
<Marquee speed={40} direction="right">{cards}</Marquee>

Reduced motion

Renders a single static, natively scrollable row with no frame loop and no edge mask.

<Marquee>{logos}</Marquee>

Use cases

  • Logo walls

    Customer logos that keep moving without ever snapping to a stop under the cursor.

  • Testimonial rows

    Two rows in opposite directions; keyboard focus on a card pauses so it can be read.

  • Ticker tape

    Vertical news or changelog feed in a sidebar.

  • Product screenshots

    A draggable strip visitors can fling through.