Globe

Guidelines#

Use it for reach and coverage moments on marketing pages ("selling in 38 countries"). Crop it: it is usually shown half-hidden under a fade.

What you provide: a relative, overflow-hidden parent with a height; the globe fills it as a square up to 600px wide (absolute inset-0 mx-auto aspect-[1/1] max-w-[600px]). className repositions it; config replaces the cobe options (markers, theta, mapSamples…). Wrap the page in a next-themes provider (DC.PageThemeProvider in this bundle), since it reads theme.

Anatomy: 16,000 map samples, theta 0.3, device pixel ratio 2. Light: white base and glow, diffuse 0.4, map brightness 1.2. Dark: base [0.4, 0.4, 0.4], glow [0.24, 0.24, 0.27], diffuse 0.5, brightness 1.4. Markers are rgb(251, 100, 21) in both, ten cities by default (Manila, Mumbai, Dhaka, Cairo, Beijing, São Paulo, Mexico City, New York, Osaka, Istanbul).

Behaviour: it turns 0.005 rad per frame; dragging adds rotation through a spring (mass 1, damping 30, stiffness 100) and shows a grab cursor. The canvas fades in over 500ms. Wrap it in GraphicsErrorBoundary or check WebGL first: cobe throws where WebGL is blocked. (Headless renders with SwiftShader draw the sphere without its dots.)

Don't put it behind body text, mount several at once, or use it where WebGL may be unavailable without a fallback.

Facts#

Group	Effects
Product	Crew OS
Global	window.DigitalCrew.Globe
Source	digitalcrew-orchestrator: components/ui/globe.tsx
Import in the app	import { Globe } from "@/components/ui/globe";

API#

TypeScript declarations emitted from components/ui/globe.tsx.

export declare function Globe({ className, config, }: {
    className?: string;
    config?: COBEOptions;
}): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "relative h-[360px] overflow-hidden rounded-xl border bg-background" },
      h("div", { className: "relative z-10 p-6" },
        h("p", { className: "text-2xl font-semibold tracking-tight" }, "Selling in 38 countries"),
        h("p", { className: "text-muted-foreground text-sm" }, "Your Digital Workers follow each prospect's time zone.")),
      h(DC.Globe, { className: "top-24" }),
      h("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background" }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(DC.PageThemeProvider, null, h(App))));
})();
</script>

More in Effects#