# LED ticker
> LED marquee with glowing text over a grid of unlit dots, coloured up and down arrows and soft edges; hovering eases it to a stop.
- Element: `<px-ticker>`
- React: `import { PxTicker } from "@/components/lumesec/px-ticker"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-ticker.json
- Page: https://elements.lumesec.ai/components/pixel-lab/ticker



Live preview: https://elements.lumesec.ai/view/px-ticker

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-ticker.js"></script>

<px-ticker></px-ticker>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-ticker
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx 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

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-ticker.js"></script>

<px-ticker></px-ticker>
```

## 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

| Keys          | Action                      |
| ------------- | --------------------------- |
| Space / Enter | Pause or resume the ticker. |

## 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](/docs/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.