# Globe

> An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **Global**: `window.DigitalCrew.Globe`
- **Source**: `digitalcrew-orchestrator: components/ui/globe.tsx`
- **Import in the app**: `import { Globe } from "@/components/ui/globe";`
- **Live preview**: /design/components/globe/preview.html
- **Page**: /design/components/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.

## API

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

## Example

```html
<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

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.