A full-width dot-matrix world map in the style of live traffic and threat maps: pulsing city nodes, lifted arcs with bright heads and fading trails, impact rings, a ticking stats panel and a live feed of the last five events. Hover a city to see its label and routes.
12,747events / s
Listening for events
Live traffic and threat telemetry from 28 regions, drawn on one map. Drop it into a status page, a NOC wall or a security console.
28 regions · live arcs · MIT licensed
npx hyperblur add hero-dot-worldmapnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-worldmap.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-worldmap.tsx.
import { HeroDotWorldmap } from "@/components/hyperblur/hero-dot-worldmap"
<HeroDotWorldmap title="Every request, everywhere." accent="#7fb3ff" routes={[["Tokyo", "Frankfurt"], ["New York", "London"], ["Sao Paulo", "Lagos"]]} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Watch the whole network breathe." | Headline at the bottom left, over the gradient. |
| subtitle | string | "Live traffic and threat telemetry from 28 regions, drawn on one map. Drop it into a status page, a NOC wall or a security console." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "28 regions · live arcs · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-worldmap" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Open console", href: "#" } | Solid accent button next to the command. Pass null to hide it. |
| brand | string | "Vantage" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Network", href: "#" }, { label: "Threats", href: "#" }, { label: "Docs", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Outlined mono button at the right of the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "Learn more", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#38d9c0" | Color of normal traffic arcs, coastlines, node rings and the primary button. The button text switches between dark and white for contrast when a hex color is given. |
| alert | string | "#ff5a5f" | Color of hot arcs (threats), their impact rings and the threat tags in the feed. |
| density | number | 1 | Multiplier for the dot grid (about 15,000 dots at 1 on a wide desktop, fewer on small screens). Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the arcs, pulses and scan sweep. 0 freezes the map but keeps the pointer tilt and hover. |
| nodes | { name: string; lon: number; lat: number }[] | 28 world cities | Activity nodes placed by longitude and latitude. The default list covers San Francisco, New York, Sao Paulo, London, Lagos, Johannesburg, Cairo, Dubai, Mumbai, Singapore, Tokyo, Sydney and more. |
| routes | [string, string][] | undefined | Pairs of node names that arcs travel between, in either direction. When omitted, about three routes per node are picked pseudo-randomly. |
| rate | number | 1.4 | Arcs launched per second. At 1.4 about 8 to 10 arcs are in the air at once. Markers that fall on water are moved to the nearest inland cell of the map. Kept between 0.2 and 6. |
| showFeed | boolean | true | Shows the live feed of the last 5 events at the top right. Hidden below 980px of container width, where the stats panel shows the latest event instead. |
| showStats | boolean | true | Shows the stats panel with events per second, live routes, blocked threats and the legend. Collapses to a single pill on small screens. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |
| onSearch | () => void | undefined | Called when the search icon button in the top bar is pressed. |
| className | string | "" | Extra classes on the section. |
| style | React.CSSProperties | undefined | Inline styles on the section. |