Request globe

Installation#

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

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

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

Usage#

import { PxGlobe } from "@/components/lumesec/px-globe";

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

Behaviour#

A dotted sphere with nine regions. Requests arc between them as glowing packets, each arrival flashes the node and rolls the counter. Drag to spin it.

Accessibility#

• The canvas has role="img" and aria-label="Spinning globe with requests routed between 9 regions. Drag to spin.".
• The request counter has aria-live="off", so its updates are not announced.
• Region names appear in a tooltip on pointer hover only; the globe has no keyboard interaction.
• Reduced motion: the globe stops rotating on its own and no new request arcs are sent; it can still be turned by dragging.

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, --foreground, --lumesec and --muted-foreground.

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

Notes#

• The regions (San Francisco, New York, São Paulo, London, Frankfurt, Mumbai, Singapore, Tokyo, Sydney), the traffic, the latencies and the counter (starting at 128,403) are simulated demo data.
• The globe is a fixed 236 by 236px and animates continuously while on screen.