A dotted 3D globe you can spin by dragging, with markers pulsing at real coordinates and light travelling along arcs between them.
Customize
Usage
import { ConnectionGlobe } from "@/components/motionkit/connection-globe";
import { themedDefaults, useMotionKitTheme } from "@/components/site/theme-provider";
<ConnectionGlobe
markers={[
{ lat: 51.5, lng: -0.13, label: "London" },
{ lat: 40.7, lng: -74, label: "New York" },
{ lat: 1.35, lng: 103.8, label: "Singapore" },
]}
className="aspect-square w-full max-w-lg"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Turn
Runs on its own; drag to spin
Arc light
Runs on its own
Global reach on about pages, infrastructure and network products, offices and customers around the world.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/connection-globe. It saves the file to components/motionkit and installs its dependencies.
Connection Globe is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
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.
KPI Card
A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.
Odometer
Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up.
Donut Chart
Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.
Customize
Usage
import { ConnectionGlobe } from "@/components/motionkit/connection-globe";
import { themedDefaults, useMotionKitTheme } from "@/components/site/theme-provider";
<ConnectionGlobe
markers={[
{ lat: 51.5, lng: -0.13, label: "London" },
{ lat: 40.7, lng: -74, label: "New York" },
{ lat: 1.35, lng: 103.8, label: "Singapore" },
]}
className="aspect-square w-full max-w-lg"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Turn
Runs on its own; drag to spin
Arc light
Runs on its own
The live preview is free to explore. Plus unlocks the source for Connection Globe and every other premium component.