Region badge

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<GeoBadge
  region="eu-central"
  latency={18}
  status="operational"
  size="md"
/>

Installation#

pnpm dlx shadcn@latest add @lumesec/geo-badge

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

npx shadcn@latest add https://elements.lumesec.ai/r/geo-badge.json

Usage#

import { GeoBadge } from "@/components/lumesec/geo-badge";

export function Example() {
  return <GeoBadge region="eu-central" latency={18} status="operational" />;
}

Behaviour#

A pill with a tiny dotted globe, a region name and its latency, for headers, footers and status bars. The globe shows where the region is.

When the region changes, the globe turns to it on a slightly under-damped spring, overshoots a little and settles, then a ring of light pings across its dots and throws a few sparks past the edge. The name rolls in the direction of the turn and each digit of the latency rolls to the new value.

API reference#

Props#

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

Ref#

ref points at the root HTMLElement.

Accessibility#

• The visible label, latency and dots are aria-hidden; a visually hidden text gives the full reading, for example "Region eu-central, Frankfurt, 18 milliseconds, operational". The city is left out when it equals the label.
• With onClick the root is a native button, so Tab, Enter and Space work as usual and that text is its accessible name. Pass aria-label to replace it.
• Changes are not announced: there is no live region. The canvases are aria-hidden.
• Reduced motion: the globe jumps to the new region, there is no ping, spark or border pop, the status dot does not pop, and the label and digits swap without rolling.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-glint, --lumesec-shine, --lumesec-success, --lumesec-warning, --destructive, --foreground, --muted-foreground, --muted, --card and --border.

Notes#

• The globe is a lattice of 480 dots on the sphere (360 at sm), land and water, from the embedded world data with no map tiles. Badges of one size share one lattice. The server renders the disc outline; the dots appear after mount.
• The globe turns the short way round on a slightly under-damped spring and its centre latitude is held within ±50°, so polar regions do not tip it over. The ping fires once the turn has settled: two rings travel out from the region, and where the first leaves the globe it throws a few sparks past the edge of the pill.
• At rest nothing moves, and the animation loop stops. It also pauses while the badge is off screen.
• The label rolls up for an eastward turn and down for a westward one while its slot eases to the new width, so the pill stays snug and never jumps. The digits roll up when the latency rises and down when it falls; a digit added or removed on the left grows or shrinks its column.
• The visually hidden text is English ("Region", "milliseconds"). Pass aria-label for another language.