Marquee

Usage

import { Marquee } from '@wdzyi/ui';

<Marquee
  label='Areas of work'
  items={['Prediction markets', 'Trading', 'Casino', 'Sports analytics', 'AI', 'Fintech']}
  speed={34}
  gap={44}
  className='font-serif text-[32px]'
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsstring[]

Short words or phrases, in order.

speednumber = 40

Its pace, in px a second.

direction'left' | 'right' = 'left'

Which way the words travel. Changing it glides through a stop to the other way.

pauseOnHoverboolean = true

Glides to a stop while the pointer rests on it.

gapnumber = 32

The space between one item and the next, in px, with the separator in the middle of it.

separatorReactNode

Between the items. A small square that scales with the type, unless you give it something else, or null for nothing.

labelstring = 'Highlights'

Names it for screen readers.

classNamestring

Its type and anything else. By default it’s 14px, medium, and your own type wins over that.

Notes

• Its speed eases towards where it’s heading over about 420ms, so resting the pointer on it brings it to a stop in about a second, and leaving lets it pick up again the same way. A throw carries on at the speed it left the hand, up to 2,400px a second, and gives way to its own pace over about 900ms.
• Focusing it from the keys stops it too, and the arrow keys nudge it along by about a word: Right brings on what’s to the right.
• One run of the items is measured to the fraction of a pixel and repeated just enough to cover the width with one to spare, so the loop has no seam at any width. It fades out over 72px, or 14% of a narrow one, at each end, and only runs while it’s on screen.
• Screen readers get the items once, as a list, and not the copies that make the loop.
• With reduced motion, it stays still and scrolls by hand, or with the arrow keys.