Marquee
A row that slides on a seamless loop at a speed in pixels per second, and holds still under the pointer or focus.
SpringsShadersSignpostsShelvesTimelinesTerminals
Features
- Two copies of the row slide by one copy and the gap, so the loop has no seam.
- Speed in pixels per second, from the row's measured width: longer rows take longer.
- Pauses under the pointer, on focus inside, when play is false and for reduced motion.
- Edges fade with a mask instead of hard cuts.
Use it for
- Testimonials, logos, release notes.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
speed | number | Pixels per second (40). |
play | boolean | Run or hold; hold it while off screen. |
gap | number | Pixels between items (16). |
label | string | Names the region for assistive tech. |
Accessibility
- The second copy is aria-hidden and inert, so everything is read and tabbed once.
- Hover and focus pause it, so it can be read.
Source
The code is in src/kit/marquee.tsx in runets, MIT licensed.