Marquee rows
Big text rows that swap to a coloured scrolling band on hover, focus or tap.
Behaviour
- Opens on mouse hover, keyboard focus, or tap (a tap toggles; on a link the second tap follows it). No stuck hover on touch.
- Row height comes from its text; the band covers the row and repeats the label with separators.
- Fixed speed per second whatever the frame rate; as many copies as the width needs, wrapped by exactly one copy.
- Only the open row's marquee runs, and only while on screen. The band is aria-hidden and inert.
- Reduced motion: the band fades in without the slide and its marquee stands still.
Props
| Prop | Type | Description |
|---|---|---|
| items | { label: ReactNode; href?: string }[] | One row each. With href the row is a link, without it a button. |
| speed | numberdefault 120 | Pixels per second the open row's marquee runs at. |
| separator | ReactNodedefault spinning asterisk | What sits between the repeats in the band. |
| indent | booleandefault true | Stagger the rows' start (from md up). |
| bandClassName | stringdefault "bg-primary text-primary-foreground" | Classes for the band, e.g. bg-foreground text-background. |
| className | string | Extra classes on the root (text size lives here). |
Installation
npx shadcn@latest add https://purrfectui.com/r/marquee-rows.jsonHow to use
import { MarqueeRows } from "@/components/ui/marquee-rows";
<MarqueeRows
items={[{ label: "We listen" }, { label: "We experiment" }, { label: "We measure" }, { label: "We share", href: "/about" }]}
speed={120}
/>Source code
Loading…
Credits
Ported from mapinly.vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.