---
title: Dot Globe
description: A dotted three.js globe with arcs that fly between cities.
category: Backgrounds
tier: pro
url: https://ui.dimaac.com/components/dot-globe
registry: https://api.dimaac.com/v1/ui/r/dot-globe.json
registry_auth: Authorization: Bearer <DiMaac licence key>
---

# Dot Globe

A three.js globe whose land is drawn with thousands of evenly spaced dots, wrapped in a soft atmosphere rim. Arcs rise between city pairs with a bright pulse riding the head, land with a ripple and draw away again, always launching on the side that faces the viewer. It turns slowly by itself, spins in on load, and can be dragged or thrown (mouse and touch) with inertia that settles back to the auto speed, or nudged with the arrow keys. The land comes from a 2.5 KB run-length mask built from Natural Earth's public-domain coastlines, so there is no texture to load. It follows the page theme (ink dots on light, near-white on dark, the arc colour deepened on paper so it still reads), caps the pixel ratio at 2, pauses off screen and frees every WebGL resource on unmount. With reduced motion it holds still and shows every arc drawn in full.

## Install

This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable.

1. Merge the registry into components.json (the key is never written into the file):

```json
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}
```

2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set:

```bash
DIMAAC_LICENSE_KEY=your-licence-key
```

3. Add the component:

```bash
npx shadcn@latest add @dimaac-pro/dot-globe
```

The registry item is https://api.dimaac.com/v1/ui/r/dot-globe.json and answers only with `Authorization: Bearer <licence key>` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing).

Dependencies:

```bash
pnpm add three
npm install three
```

By hand:

Unlock the code on https://ui.dimaac.com/components/dot-globe with your licence key, then:

1. Install the packages it uses: three.
2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/dot-globe.tsx.
3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
4. Import it with import { DotGlobe } from "@/components/dimaac/dot-globe" and give its parent a size: it fills it.

## Usage

```tsx
import { DotGlobe } from "@/components/dimaac/dot-globe";

<DotGlobe />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dotColour` | `string` | `"auto"` | Colour of the land dots. "auto" is ink on a light page and near-white on a dark one. |
| `arcColour` | `string` | `"#ddfc3e"` | Colour of the arcs, pulses and landing ripples. On light pages it is deepened so it still reads. |
| `dotDensity` | `DotDensity` | `"medium"` | How many dots draw the land: low (2.2 degree spacing), medium (1.5) or high (1). |
| `autoRotateSpeed` | `number` | `0.3` | How fast the globe turns by itself, from 0 (still) to 1 (about one turn every 18 seconds). |
| `arcs` | `readonly GlobeArc[]` | `defaultArcs` | The city pairs the arcs fly between, as [fromLat, fromLng, toLat, toLng]. |
| `arcInterval` | `number` | `0.9` | Seconds between one arc launching and the next. |
| `atmosphere` | `boolean` | `true` | A soft glowing rim around the globe. |
| `theme` | `"auto" \| "light" \| "dark"` | `"auto"` | Which tuning to use. "auto" follows the page: data-theme, a dark class, or the system setting. |
| `label` | `string` | `"A dotted globe with arcs flying between cities. Drag or use the arrow keys to spin it."` | What screen readers hear. The globe is a picture with drag and arrow-key controls. |
| `className` | `string` | `""` | Extra classes for the outer box. Give it a size (the globe fits inside it). |

## Credits

- Land outlines: Natural Earth, Natural Earth (https://www.naturalearthdata.com), Public domain

## Source

The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/dot-globe.

## Agent prompt

```text
Add the Dot Globe component (<DotGlobe />) from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access).

Docs: https://ui.dimaac.com/components/dot-globe

1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file:
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key
   Ask them for it if it isn't set. Never print it or commit it.

3. Install it with:
npx shadcn@latest add @dimaac-pro/dot-globe

The registry item is https://api.dimaac.com/v1/ui/r/dot-globe.json and wants the header "Authorization: Bearer <licence key>".

Then use it like this:
import { DotGlobe } from "@/components/dimaac/dot-globe";
<DotGlobe />

It imports three; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder.
Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback.
Full index for agents: https://ui.dimaac.com/llms.txt
```