Marquee
An infinite, seamless scroller for logos, testimonials and feeds. Eases to a stop on hover.
Motion
Trusted by teams at
NorthwindAcmeGlobexInitechUmbrellaHooliStarkWayneTyrellSoylent
Playground
Tweak the props, the preview and the code follow.
NorthwindAcmeGlobexInitechHooliUmbrella
Props
40
import { Marquee } from "@/components/ui/marquee"
<Marquee>
<span>Northwind</span>
<span>Acme</span>
…
</Marquee>Installation
npx @plumsydev/plum-ui add marqueeUsage
import { Marquee } from "@/components/ui/marquee"<Marquee speed={40} className="[--gap:3rem]">
<span>Acme</span>
<span>Globex</span>
</Marquee>Examples
Opposite rows
Two rows with reverse on the second.
“We replaced three internal libraries in a week.”
Léa Martin
Design lead, Northwind
“The motion feels considered. Nothing is there for show.”
Sam Okafor
Staff engineer, Globex
“Our onboarding finally feels like the rest of the product.”
Mia Chen
Founder, Lumen
“Copy, paste, tweak. No package fighting back.”
Tom Reyes
Frontend, Initech
“Users noticed the polish before we told them about it.”
Ava Rossi
PM, Hooli
“Accessible by default saved us an audit cycle.”
Noah Kim
CTO, Tyrell
Hover a row, it eases to a stop.
Vertical
vertical with a fixed height for a ticker-style feed.
Changelog
NewDock component with magnification
FixCheckbox draws its check again
PerfMarquee now runs on the compositor
NewSpotlight groups light up together
FixToasts respect reduced motion
API Reference
Marquee
Extends div. Set the spacing with [--gap:…].
| Prop | Type | Default |
|---|---|---|
speedSpeed in px per second, independent of content length. | number | 40 |
reverseScroll the other way. | boolean | false |
verticalScroll vertically. Give the marquee a height. | boolean | false |
pauseOnHoverSmoothly decelerate to a stop while hovered. | boolean | true |
fadeFade the edges with a mask. | boolean | true |
repeatCopies of the content. Raise it if the content is narrower than the container. | number | 4 |
Notes
- Runs on the Web Animations API, so it stays on the compositor and never re-renders React.
- With reduced motion it becomes a regular scrollable row.