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.
Installation
pnpm dlx shadcn@latest add @lumesec/px-signalFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-signal.jsonUsage
import { PxSignal } from "@/components/lumesec/px-signal";
export function Example() {
return (
<PxSignal />
);
}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.
outageReact proponOutageDetail{}Fires when the "Simulate outage" button is pressed.
Accessibility
- The canvas has
role="img"andaria-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.
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.
Related
Was this page helpful?