Components

Marquee

Pro

A velocity-driven marquee that eases to a crawl on hover instead of freezing, pauses for keyboard focus, and can be flung by hand — the engine under logo rows and testimonial bands.

GitHub
Figma
Slack
Framer
Apple
Chrome
GitLab
Trello
Dribbble
CodePen
“Motion that finally feels like it belongs in the product.”

Aria Chen

Design, Linear

“Dropped it in and shipped the same afternoon.”

Juno Park

Frontend, Vercel

“The hover slowdown alone sold the whole team.”

Kai Moreno

Founder, Arc

“Every detail is considered. Nothing is decoration.”

Nova Reyes

Product, Raycast

“The first marquee I've used that respects the keyboard.”

Rio Tanaka

Engineering, Resend

“Fling it, drag it, hover it. It always lands softly.”

Sage Okafor

Design, Cal.com

Installation

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

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<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.