dot-globe

A React point-cloud Earth with bundled Natural Earth geography and no runtime map downloads.

Live demo

Light	Dark

Add to your React project

npm install @hmwcs/dot-globe

For a pnpm project, use pnpm add @hmwcs/dot-globe. React 18.3+ or 19 is required.

import { DotGlobe } from "@hmwcs/dot-globe";

export function Earth() {
  return (
    <div style={{ width: 320, maxWidth: "100%", background: "#0b1018" }}>
      <DotGlobe theme="dark" autoRotate={false} />
    </div>
  );
}

The globe fills its container width and defaults to a square; supply the background. Use a client component in frameworks with React Server Components.

See advanced usage for city presets, coordinates, motion, appearance, and accessibility.

Run the demo locally

Use Node.js 22.13+ and pnpm 11.16.0 for repository development:

git clone https://github.com/HMWCS/dot-globe.git
cd dot-globe
pnpm install --frozen-lockfile
pnpm dev

Open the printed URL. Drag or use arrow keys to rotate; controls select view, quality, theme, and motion.

Development

pnpm check
pnpm --filter dot-globe-example build

The static demo build is examples/react-vite/dist. Geography generation and verification are documented in data provenance.

Attribution

Project code is available under the MIT License. Natural Earth data is public domain and documented separately. Dependency attributions are listed in third-party notices.