Dotted Map
BackgroundsA world map drawn as a grid of dots, with markers that pulse.
every browseralways
Regions Map
Where a service runs: the world in dots with each region pinned and pulsing in turn, a chip at each pin with its code and the latency measured there, and under the map the same regions as a list (name, code, figure), so a reader who cannot see the map, or reads on a narrow screen where the chips would crowd, loses nothing. A region still to open is a dashed ring and says so in the list. A few figures can sit beside the heading. Zero JavaScript; the map is core DottedMap.
Live demo
Regions
Close to every sender
Each request is answered by the region nearest the sender. Sample figures, made up for this demo.
- regions live
- 6
- median, worldwide
- 27 ms
Median latency from the nearest city
- San Francisco
sfo122 ms - Washington
iad119 ms - São Paulo
gru141 ms - Frankfurt
fra117 ms - Mumbai
bom136 ms - Singapore
sin128 ms - Sydney
syd1Opening soon
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
Measured
JavaScript of its own
0 B
Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 12.5 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
Chrome 105 · Firefox 110 · Safari 16; needs container-units. Elsewhere: without container queries the chips stay hidden and the list carries every region.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/regions-map---
import RegionsMap from '@/components/moonarc/pro/RegionsMap.astro';
---
<RegionsMap
eyebrow="Regions"
copy="Requests are answered by the nearest region."
metric="Median latency from the nearest city"
stats={[{ value: '6', label: 'regions' }, { value: '38 ms', label: 'median, worldwide' }]}
regions={[
{ code: 'iad1', name: 'Washington', lat: 38.9, lng: -77, latency: 24 },
{ code: 'fra1', name: 'Frankfurt', lat: 50.1, lng: 8.7, latency: 18 },
{ code: 'sin1', name: 'Singapore', lat: 1.35, lng: 103.8, latency: 31 },
{ code: 'syd1', name: 'Sydney', lat: -33.9, lng: 151.2, status: 'soon' },
]}
>
<span slot="headline">Close to <em>every user</em></span>
</RegionsMap>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: dotted-map, reveal.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
regions | { code; name; lat; lng; latency?; status?; side? }[] | none | The regions. code is the short code (fra1), name the city; latency is in ms; status "soon" draws a dashed ring and prints soonLabel in the list; side puts the chip on another side of its pin where two regions are close (top, bottom, left, right). |
eyebrow | string | none | A short line above the heading. Slot "eyebrow" wins. |
headline | string | none | The heading. Slot "headline" wins and may hold an <em>. |
copy | string | none | A line under the heading. |
metric | string | 'Median latency' | What the figure is, printed over the list. |
stats | { value: string; label: string }[] | none | A few figures beside the heading. |
soonLabel | string | 'Opening soon' | The words in the list for a region still to open. |
level | 2 | 3 | 2 | Heading level of the section's heading. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The section's ground; on ink and brand the pins take the tone's emphasis colour. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-in.ma-regions.ma-regions__chip.ma-regions__code.ma-regions__copy.ma-regions__eyebrow.ma-regions__head.ma-regions__headline.ma-regions__inner.ma-regions__list.ma-regions__map.ma-regions__metric.ma-regions__pin.ma-regions__ring.ma-regions__row.ma-regions__stat.ma-regions__stats.ma-regions__table.ma-regions__value.ma-regions__words
Slots
slot="eyebrow"slot="headline"
Reduced motion
The pins do not pulse and the chips are there at once.
With ClientRouter
CSS and Reveal; the chips arrive again on a fresh page.
Why it is built this way
- The map keeps DottedMap's own ratio (200 by 78.9: the drawing is cut at 84° N and 58° S), so a chip placed in percentages of the box lands on its dot at every width.
- The chips are for a wide box only. Under 44 rem they would cover each other over Europe, so they hide and the list, which was always there, does the work.
- The map is hidden from assistive technology; the list is the content: name, code and figure in reading order.
- A region still to open is a dashed ring with no figure, so the map never claims a latency nobody has measured.
Replaces: Region maps on infrastructure and API landing pages · World map with locations (Aceternity). See the migration table.
Related
Stats Row
ProShows big numbers that count up when scrolled into view, 120 ms apart, with labels and an optional bar under each, in a hairline row.
newly · Chrome 91 · Firefox 128 · Safari 17scroll
Status Board
ProA status page in one section: the state of everything as the heading with its light (it pulses three times, then stays lit), the uptime of the days shown as a Gauge, each service with its state and a bar for every day (up, degraded, an outage, maintenance, no data) rising in turn as the board arrives, and the incidents with their updates, newest first.
every browserscrollhover
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown