Marquee

A generic infinite scroller — the reusable ribbon behind a NOC alert ticker. It renders its children on a continuously moving track, duplicating the content group so the loop is seamless, and supports both horizontal and vertical orientations.

Import

import { Marquee } from "@roger-emerson/ploxum-primitives";

Usage

<div className="w-96">
  <Marquee direction="left" speed={25}>
    <Badge tone="critical">P1 · core-router-3 unreachable</Badge>
    <Badge tone="warning">South gate scan queue &gt;7 min</Badge>
    <Badge tone="info">Shift change in 45 min</Badge>
  </Marquee>
</div>

The marquee fills the width (or height, when vertical) of its parent, so wrap it in a bounded container.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content scrolled across the track. Rendered twice internally for a seamless loop.
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	Scroll direction. `up`/`down` switch the track to a vertical column.
`speed`	`number`	`25`	Seconds per full cycle. Lower is faster.
`gap`	`number`	`16`	Pixel gap between repeated content groups.
`pauseOnHover`	`boolean`	`true`	Pauses the scroll while the pointer is over the marquee.
`fade`	`boolean`	`true`	Applies an edge mask gradient so items fade in/out at both ends.
`className`	`string`	—	Merged onto the clipping viewport.

Design rules

Never the sole signal for critical/P1 status. A moving ribbon is easy to miss and stops entirely under reduced motion — always pair a critical item with a StatusPip (or another static indicator) so the state is legible without the animation.
Reduced motion falls back to manual scroll. Under prefers-reduced-motion: reduce the Marquee renders its children once in a normal, manually-scrollable overflow container with no animation. A NOC operator with reduced motion enabled must never be shown endless movement.
The loop is seamless because the content group is rendered twice and the track translates by exactly one group's length — there is no gap or jump at the wrap point.
For horizontal use, set the parent's width; for vertical (up/down), set the parent's height. The marquee clips to that box.

Storybook

Open Marquee in Storybook ↗