Globe

A rotating point-cloud globe whose landmasses are drawn from an equirectangular mask, draggable with a pointer, complete with travelling arcs and glowing markers. Pure canvas 2D — no WebGL and no three.js.

Globe is a React 3D globe component (an interactive, dotted world globe) drawn with canvas 2D: landmasses render as a point cloud and arcs with travelling pulses connect cities. Motion is used only to read the reduced-motion setting; rendering needs no WebGL or three.js.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<Globe/>

    </div>
  );
}

When to use

• A "global regions / data centers" section on a SaaS or infrastructure landing page
• A hero visual for a distributed team, customer footprint or office locations
• Logistics or cross-border commerce pages where arcs suggest traffic between cities
• Not a good fit: when every continent and connection should be visible at once, a flat World Map works better

Installation

npx webberui@latest add https://webberui.com/r/globe.en.json

Usage

import { Globe } from "@/components/ui/globe";

<Globe size={460} />

Custom colors and markers:

<Globe
  size={400}
  dotColor="#34d399"
  arcColor="#a7f3d0"
  arcCount={10}
  markers={[
    { lat: 25.03, lng: 121.56 },
    { lat: 37.77, lng: -122.42 },
  ]}
/>

Examples

Mark your office locations

With two or more markers, arc endpoints are picked at random from those markers, so arcs only appear between the cities you list.

import { Globe } from "@/components/ui/globe";

const offices = [
  { lat: 25.03, lng: 121.56, size: 1.6 }, // Taipei HQ
  { lat: 35.68, lng: 139.69 }, // Tokyo
  { lat: 1.35, lng: 103.82 }, // Singapore
  { lat: 37.77, lng: -122.42 }, // San Francisco
];

export function OfficesGlobe() {
  return <Globe size={420} markers={offices} arcCount={6} />;
}

Static, non-draggable background

Turn off rotation and dragging and set arcs to 0 for a quiet background behind text.

<div className="relative overflow-hidden rounded-xl border p-10">
  <Globe
    size={520}
    autoRotate={false}
    interactive={false}
    arcCount={0}
    className="pointer-events-none absolute -right-32 -top-20 opacity-60"
  />
  <h2 className="relative text-2xl font-semibold">Deploy to 18 regions</h2>
</div>

Brand colors

When all four color props are set, the globe stops following the light/dark theme. baseColor and glowColor go through shading and alpha math, so pass them as #rgb or #rrggbb.

<Globe
  dotColor="#f59e0b"
  arcColor="#fde68a"
  baseColor="#1c1917"
  glowColor="#b45309"
  rotationSpeed={0.2}
/>

Props

Accessibility

• When the user has "reduce motion" enabled at the system level, a static globe is rendered — no rotation and no arc animation
• The canvas is marked aria-hidden as a purely decorative layer, so it does not affect assistive technology
• When colors are unspecified they follow the light/dark theme automatically; you can also use --wb-globe-dark to observe the current theme

FAQ

Does it work with the Next.js App Router?

Yes. The source already starts with "use client", so import it from a Server Component page as usual. Math.random and window.devicePixelRatio only run inside effects, so there is no hydration mismatch.

Does it keep using CPU on a long page?

No. An IntersectionObserver stops the requestAnimationFrame loop when the globe scrolls out of view and resumes it when it comes back. Canvas resolution caps devicePixelRatio at 2.

Can I set where each arc starts and ends?

No. Arc endpoints are random: picked from markers when there are two or more, otherwise from land points. You control the number of arcs with arcCount and where the markers sit.

Can I use CSS variables or rgb() for colors?

dotColor and arcColor are passed straight to the canvas, so any color string canvas accepts works. baseColor and glowColor are shaded in code and only hex is parsed; other formats fall back to the default blue.

What are the dependencies?

motion, clsx and tailwind-merge, plus the cn helper in @/lib/utils. You can skip the CLI: the Manual tab walks through copying the source.