# Latency scope
> Scrolling pixel oscilloscope for latency with dithered tails, amber and red spikes over a 400 ms line, and a rolling p50/p95 readout.
- Element: `<px-signal>`
- React: `import { PxSignal } from "@/components/lumesec/px-signal"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-signal.json
- Page: https://elements.lumesec.ai/components/pixel-lab/signal



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

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

<px-signal></px-signal>
```

## Installation

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

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-signal.json
```

## Usage

React:

```tsx
import { PxSignal } from "@/components/lumesec/px-signal";

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

HTML:

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

<px-signal></px-signal>
```

## Behaviour

A scrolling oscilloscope where each sample is a bright head over a dithered tail. Spikes cross the 400 ms line in amber and red, and the readout rolls with p50 and p95 alongside.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail | Description                                         |
| -------- | ---------- | ------ | --------------------------------------------------- |
| `outage` | `onOutage` | `{}`   | Fires when the "Simulate outage" button is pressed. |

## Accessibility

* The canvas has `role="img"` and `aria-label="Live latency chart"`.
* The current value and the p50/p95 line are plain text without a live region.
* The sample tooltip appears on pointer hover only. "Simulate outage" is a native button, disabled for 4.2 seconds after use.
* Reduced motion: the trace advances one sample at a time instead of scrolling smoothly and the readout changes without the roll.

## 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 `--card`, `--destructive`, `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* All samples are simulated: a random walk around 160 ms with occasional spikes, one sample every 0.12 seconds. An outage pushes values to 820 to 1,300 ms for 3 seconds.
* The vertical scale runs from 0 to 1,000 ms. Samples above 350 ms are amber and above 600 ms red; a Spike chip shows while the latest reading is 600 ms or more.
* The canvas is 106px tall and animates continuously while on screen.