# Request globe
> Dotted pixel globe with nine regions; requests arc between them as glowing packets, each arrival flashes its node. Drag to spin it.
- Element: `<px-globe>`
- React: `import { PxGlobe } from "@/components/lumesec/px-globe"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-globe.json
- Page: https://elements.lumesec.ai/components/pixel-lab/globe



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

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

<px-globe></px-globe>
```

## Installation

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

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

## Usage

React:

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

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

HTML:

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

<px-globe></px-globe>
```

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