A dotted globe turning slowly, arcs rising between nine cities above its surface, each city pulsing as one lands and its label riding along with a live latency; drag it to look around, and it swings on, then carries on turning. Beside it the network's numbers. Pauses, and stacks on phones.
When to use
- A slowly turning globe with arcs rising between cities as traffic lands.
- Global products' hero or about sections; a live view of where your users are.
When not to use
- Where exactly traffic comes from, and how much: Global network's flat map or a list reads better.
- Pages where motion would pull the eye from what people came to read.
Usage
Network globe with your own data: every prop has the sample as its default, so pass only what you have.
import { useEffect, useRef } from "react"
import { NetworkGlobe, type GlobeHandle } from "@/components/dashral/blocks/network-globe"
const globe = useRef<GlobeHandle>(null)
useEffect(() => traffic.on("visit", (v) => globe.current?.send(v.from, v.to)), [])
<NetworkGlobe ref={globe} mode="live" cities={cities} />API reference
NetworkGlobe
The section: a heading and figures beside the globe, with a hint to drag it and Pause. Every part comes from props, with a sample network by default.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Global network" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
cities | City[]The cities on the globe, each with its latency. | sample |
facts | { value: string; label: string }[]The figures beside it: the value on top, its label under it. | sample |
mode | GlobeProps["mode"]With your own traffic instead of sample arcs (see Globe's mode="live"). | — |
ref | React.Ref<GlobeHandle> | — |
Globe
A dotted globe that turns on its own, with arcs rising between cities: each arc's head travels the great circle above the surface and its tail follows, and the city it reaches pulses. City labels ride along and fade as they turn away. Drag to turn it (it keeps a little of the swing, then carries on); the pointer over it slows it down. Drawn on a canvas, one requestAnimationFrame loop for everything. Sample arcs by default; with mode="live", the ones you send (see GlobeHandle). It stops off screen, in a hidden tab and when paused; with reduced motion it's one still view with a few arcs drawn (live, none).
| Prop | Type | Default |
|---|---|---|
cities | City[]Required. | — |
speed | numberHow fast it runs: 1 is the usual pace, 2 twice as fast, 0 holds it still. | 1 |
paused | booleanBrings it to rest where it is (easing down, not stopping in one frame). | false |
mode | "demo" | "live""demo" raises sample arcs on its own and lets latencies wander; "live" raises one only when you send it and shows each city's | "demo" |
ref | React.Ref<GlobeHandle> | — |
className | string | — |
type City
| Prop | Type | Default |
|---|---|---|
id | string | — |
name | string | — |
lon | number | — |
lat | number | — |
latency | number | — |
type GlobeHandle
Raises arcs on a live globe (mode="live").
| Prop | Type | Default |
|---|---|---|
send | (from: string, to: string) => voidRaises one arc from the city with id | — |