LED ticker

Installation#

pnpm dlx shadcn@latest add @lumesec/px-ticker

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-ticker.json

Usage#

import { PxTicker } from "@/components/lumesec/px-ticker";

export function Example() {
  return (
    <PxTicker />
  );
}

Behaviour#

An LED marquee: glowing text over a grid of unlit dots, coloured up and down arrows and soft edges. Hovering eases it to a stop rather than freezing it.

Keyboard#

Accessibility#

• The board is focusable with role="marquee" and aria-label="Status ticker". The ticker items are text; the repeated copies that fill the loop are aria-hidden.
• Click or tap also toggles the pause; the paused state is not exposed to assistive technology.
• Reduced motion: the ticker does not scroll.

Theming#

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --destructive, --foreground, --lumesec, --lumesec-success, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger, --ui-fg, --ui-mono, --ui-muted, --ui-ok and --ui-track.

Notes#

• The ticker items are built-in demo data (model, latency, errors, agents, uptime); there is no attribute for your own text.
• Hover pausing applies to mouse pointers only. The board is 50px tall and scrolls with a CSS transform; the text is set in the monospace font.