Media & time

Marquee

An infinite ticker: the content, then an `aria-hidden` copy of it, translated by exactly half the track so the seam is invisible.

Server safeSource

Import

import { Marquee } from '@the_viveksingh/vivek-ui'

A scrolling strip

Children are duplicated so the loop has no visible seam. pauseOnHover stops it on hover and on keyboard focus, and reduced-motion users get a static row.

Zero runtime dependencies

83 components

6 charts

MIT licensed

Server-safe by default

40.5 kB gzipped

<Marquee speed={40} gap={4} gradient pauseOnHover>
  {items.map((item) => (
    <Text key={item} className="tile">{item}</Text>
  ))}
</Marquee>

Reverse direction

Zero runtime dependencies

83 components

6 charts

MIT licensed

Server-safe by default

40.5 kB gzipped

<Marquee direction="right" speed={30} pauseOnHover>
  {items.map((item) => (
    <Text key={item} className="tile">{item}</Text>
  ))}
</Marquee>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Marquee
Prop	Type	Default	Description
`speed`	`number`	—	Relative pace. `1` is the default cadence — one full pass of the content every `--vk-marquee-cycle` (20s) — `2` is twice as fast, `0.5` half. Deliberately NOT pixels per second: that needs the rendered width of the track divided by a speed, and CSS cannot divide a length by a number to produce a time. A px/s prop would therefore mean measuring the DOM, which would cost this component its zero-JS, server-safe implementation. Override `--vk-marquee-cycle` for absolute control.
`direction`	`MarqueeDirection`	—	Defaults to `left` (or `up` once `vertical` is set).
`pauseOnHover`	`boolean`	—	—
`gradient`	`boolean`	—	Fade the leading and trailing edges out, so content does not pop in and out.
`gradientWidth`	`string`	—	Width of each fade. Defaults to `--vk-space-8`.
`vertical`	`boolean`	—	Scroll along the block axis. Height comes from `--vk-marquee-height` (18rem).
`gap`	`StackGap`	—	Space between items, and across the seam. Defaults to `4`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Marquee carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.