# Connection Globe

> A dotted 3D globe you can spin by dragging, with markers pulsing at real coordinates and light travelling along arcs between them.

Category: Charts · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/connection-globe

## When to use it

Global reach on about pages, infrastructure and network products, offices and customers around the world.

## How it works

About a thousand dots are spread evenly over a sphere with a Fibonacci lattice, so they never bunch at the poles. Every frame, each point is turned by the current spin and a fixed tilt, then flattened to the screen; points facing you are brighter and bigger, and the far side is faint, which makes the sphere read as solid. Markers come from real latitude and longitude. Arcs follow the great circle between two markers, lifted off the surface in the middle like flight paths, with a bright comet travelling along each. Dragging spins it with momentum that eases back to a slow turn.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/connection-globe` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `markers` | `GlobeMarker[]` |  | Places to mark by latitude and longitude, with optional labels. |
| `arcs` | `[number, number][]` |  | Pairs of marker indexes to join. Each links to the next by default. |
| `color` | `string` | `"#94A9A7"` | Colour of the globe's dots. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the markers and arcs. |
| `dots` | `number` | `1100` | Number of dots on the sphere. |
| `speed` | `number` | `1` | Turning speed. 0 holds it still. |
| `label` | `string` |  | Describes the globe for screen readers. |

## Accessibility

- **Keyboard: Not applicable.** A picture, not a control: nothing to focus. Dragging only changes the view.
- **Screen readers: Pass.** Read as an image with a description listing the marked places, or your own label.
- **Reduced motion: Pass.** With reduced motion on, it holds still with the arcs drawn fully; it only moves while you drag it. It also stops drawing while off screen.
- **Colour contrast: Not applicable.** Decorative graphics with no text inside.