How to Add a GitHub Globe to Your React Site (Free)

What Is a GitHub Globe?

A GitHub globe is the interactive 3D spinning globe that GitHub uses on its homepage to visualise real-time contributions and connections between developers worldwide. It renders arcs of light flying between geographic coordinates, conveying a sense of global collaboration and activity — all inside the browser using WebGL.

You have probably seen it on GitHub's marketing pages: a dark sphere covered in glowing dots and animated arcs that respond to mouse interaction. The effect is technically impressive, yet it is built on open standards and can be reproduced in any React application without a backend or paid licence.

For product landing pages, open-source project sites, or developer portfolios, a GitHub globe is a powerful visual signal that says "this product is used worldwide." It immediately communicates scale and community — two things every SaaS or library wants to project from the first scroll.

Empire UI ships a free, production-ready Globe component that replicates this effect faithfully. You can browse the full component catalogue and other animated backgrounds at /templates or explore complementary effects like aurora backgrounds and shooting stars.

How the Globe Works Under the Hood

The Globe component is powered by `cobe`, a tiny (~5 kB gzipped) WebGL library that renders a sphere onto an HTML <canvas> element. cobe handles all the low-level shader work: dot-matrix land mass rendering, arc animation, rotation physics, and device-pixel-ratio scaling.

On top of cobe, Empire UI's wrapper adds React lifecycle management (useEffect, useRef), spring-based mouse-drag interaction via react-spring, responsive canvas sizing, and a clean prop API so you never have to touch WebGL yourself. The result is a component you drop in and customise through props.

Arcs are defined as arrays of { startLat, startLng, endLat, endLng, arcAlt, color } objects. You supply real geographic coordinates — or fabricate plausible ones — and cobe draws animated bezier curves between them. The globe auto-rotates when the user is not interacting and responds to click-drag with inertia.

Because the render loop runs on requestAnimationFrame inside a <canvas>, there is no DOM thrashing and performance is excellent even on mid-range mobile hardware. The component cleans up its animation frame on unmount, so there are no memory leaks in single-page apps.

Installation and Basic Setup

Install Empire UI and its peer dependencies. If you are starting fresh, the quickest path is:

npm install @empire-ui/components cobe react-spring
# or
pnpm add @empire-ui/components cobe react-spring

Then import the Globe component and drop it into any page or section. A minimal working example looks like this:

import { Globe } from '@empire-ui/components';

const arcs = [
  { startLat: 51.5, startLng: -0.1,  endLat: 40.7,  endLng: -74.0, arcAlt: 0.3, color: '#6366f1' },
  { startLat: 48.8, startLng: 2.35,  endLat: 35.7,  endLng: 139.7, arcAlt: 0.4, color: '#8b5cf6' },
  { startLat: 37.8, startLng: -122.4, endLat: -33.9, endLng: 151.2, arcAlt: 0.5, color: '#a78bfa' },
];

export default function HeroSection() {
  return (
    <section className="relative flex items-center justify-center h-screen bg-black">
      <div className="absolute inset-0 flex items-center justify-center">
        <Globe
          width={600}
          height={600}
          arcs={arcs}
          globeColor="#0f172a"
          atmosphereColor="#6366f1"
          dotColor="#e2e8f0"
          arcColor="#6366f1"
        />
      </div>
      <h1 className="relative z-10 text-5xl font-bold text-white">
        Built for developers, worldwide.
      </h1>
    </section>
  );
}

The width and height props control the canvas dimensions. Set them equal for a perfect sphere. For responsive layouts, read the container's bounding rect in a useEffect and pass dynamic values — or use the built-in autoResize prop which observes a ResizeObserver on the parent element automatically.

Customising the Globe to Match Your Brand

Empire UI's Globe accepts a rich set of visual props. `globeColor` sets the base land-mass colour; `atmosphereColor` controls the outer glow halo; `dotColor` and dotRadius adjust the grid of land-mass points; `arcColor` and arcOpacity style the animated arcs.

For a glassmorphism aesthetic, try globeColor="#1e293b", a semi-transparent atmosphere in violet or cyan, and arcs in #06b6d4. For neobrutalism, go flat with globeColor="#000", thick arcs in bright yellow, and zero atmosphere. You can see style tokens for all 40 visual themes in the Empire UI MCP server, which auto-generates component code matched to your chosen style.

You can also control rotation speed with the rotationSpeed prop (default 0.003 radians per frame) and disable auto-rotation with autoRotate={false} to let user drag be the only motion. Setting enablePointerEvents={false} is useful when the globe is purely decorative and you do not want it capturing scroll events.

If you want to animate the arc list itself — for example cycling through "active connections" in real time — update the arcs prop from a useState hook on an interval. cobe re-renders instantly on prop change, so live-updating data is as simple as setArcs(newArcs) every few seconds.

Accessibility and Performance Best Practices

A WebGL canvas is opaque to screen readers by default. Wrap your Globe in a <div role="img" aria-label="Interactive globe showing worldwide user activity"> and add a visually-hidden <p> describing what the globe represents. This satisfies WCAG 2.1 AA requirements for non-text content.

Respect the user's motion preference. Read window.matchMedia('(prefers-reduced-motion: reduce)') and pass autoRotate={false} and rotationSpeed={0} when the preference is set. Empire UI's Globe component accepts a reducedMotion prop as a shortcut that applies both settings simultaneously.

For Core Web Vitals, the globe canvas should not be in the viewport's critical rendering path. Lazy-load the section with next/dynamic (Next.js) or React's lazy + Suspense. The canvas itself does not affect Largest Contentful Paint as long as your hero text renders first.

You can explore more performance-conscious animated components — including particles backgrounds and custom cursors — in Empire UI's free library. All components are tree-shakeable, so importing Globe adds only the cobe runtime to your bundle, not the entire design system.

Deploying and Integrating With Your Design System

The Globe component works seamlessly inside any CSS framework. With Tailwind CSS, use utility classes on the wrapper div to position the canvas: absolute inset-0, flex items-center justify-center, and overflow-hidden are the most common patterns for hero sections.

If you are using Empire UI's full token system, the Globe's default colour values are mapped to CSS custom properties so they automatically adapt to light/dark mode switches. Toggle your theme at the :root level and the globe atmosphere colour follows without any JavaScript re-render.

For projects that need multiple globe instances — a world map section and a smaller sidebar widget, for example — each <Globe> manages its own requestAnimationFrame loop independently. There is no global singleton or shared state to worry about.

Ready to go further? Combine the Globe with Empire UI's animated tabs to switch between different arc datasets, or place it inside a bento grid cell for a modern dashboard layout. The full component library, templates, and MCP server are all free and open-source — no sign-up required.

FAQ

Read next