Atmosphere Globe

Atmosphere Globe

Atmosphere Globe is a portable WebGL globe with 87 flat controls, layered warm/cool lighting and editable locations and routes. The default keeps a dark centre, orange upper rim and violet lower edge, using four layered CSS light surfaces. It uses bundled geography and renderer code; it makes no CDN or application API requests.

React

import { AtmosphereGlobe } from './components/atmosphere-globe/src/react';

export default function Network() {
  return <AtmosphereGlobe
    sizing="fixed"
    height={560}
    renderStyle="cartographic"
    style={{ maxWidth: 720 }}
    warmColor="#ff7024"
    coolColor="#8b5cf6"
    rotationSpeed={3}
    locations={['london | London | 51.5 | -0.12', 'tokyo | Tokyo | 35.68 | 139.69']}
    connections={['london | tokyo']}
    accessibleLabel="Our London and Tokyo offices."
  />;
}

Every control below is a React prop. Component is an alias of AtmosphereGlobe. Additional props are className, style and paused. Width follows the containing element. sizing="fill" (the default) fills a parent with a definite height, including the catalogue preview and expanded view. In normal page flow, height supplies the intrinsic fallback (560px by default). A parent with only min-height does not establish a percentage-height basis; give it an explicit height to fill it. Use sizing="fixed" to always use the configured pixel height. React style remains available for wrapper sizing, for example style={{ height: 720 }}; the globe keeps its proportions within that area. The wrapper renders static server HTML and owns one renderer through settings changes. Its cleanup supports React Strict Mode remounts.

Framework-neutral use

import { defaults, resolveSettings, render, mount } from './src/core';

// Server-side markup, including a static globe and accessible network text.
const html = render({ sizing: 'fixed', height: 480 }, 'shipping-network');

// Client-side: host must be a dedicated element; mount owns its children.
const globe = mount(document.querySelector('#globe')!, { sizing: 'fixed', height: 480 });
globe.update({ warmColor: '#f69148', rotationSpeed: 2 });
globe.pause();
globe.resume();
// Before removing the host:
globe.destroy();

mount returns synchronously while the renderer loads. Updates made during initialization apply to the eventual renderer. destroy cancels pending initialization and is safe to call repeatedly. Call it before reusing a host. An already mounted host rejects a second mount. Pass distinct IDs when you supply your own IDs; omitted IDs are unique within the module.

resolveSettings(input) returns a complete, detached configuration. update(patch) changes only specified keys, preserving the stage, canvas and remaining settings. Validation happens before the renderer is called. Unknown keys, nonfinite numbers, out-of-range values, invalid enums/colours and invalid network references throw; values are not silently clamped. The control step is an editor increment, not a parser quantization rule. A destroyed handle rejects updates.

Locations and routes

Locations use id | name | latitude | longitude. IDs contain 1–40 letters, digits, underscores or hyphens and must be unique. Latitude is −90 to 90; longitude is −180 to 180. Names are literal text, never HTML. A location list may be empty. Routes use origin-id | destination-id; both IDs must exist. To replace a network, pass both lists in the same update so validation sees a consistent pair.

Each list accepts at most 100 entries, each up to 140 characters. Blank/malformed entries are errors. parseNetwork(settings) returns locations as { id, name, lat, lon } and routes as { from: [lat, lon], to: [lat, lon] }. This is a decorative network visualization, not a navigation map.

Presets, reset and saved configurations

The manifest previews are partial settings for Atmosphere, Cartographic and Constellation. The renderStyle control changes the globe surface treatment: Atmosphere uses the deep two-tone light, Cartographic uses a softly coloured map surface, and Constellation uses a translucent core with a thin luminous rim. All three respect the atmosphere toggle and your lighting colours, strengths, widths and surface opacity; changing style preserves every other setting. Applying a full preview also changes its listed supporting controls. For Constellation, the core colour is rendered at 20% alpha before surface opacity.

To preserve your network when applying a preview, merge its settings over your current settings. For a full reset, apply defaults; this also restores the example network.

Serialize the complete resolved configuration with JSON.stringify(resolveSettings(values)). Restore it with resolveSettings(JSON.parse(saved)) before mounting or updating. All 87 controls, including network lists, round-trip this way. There is no dependency on the original globe studio. Migrating from Route Globe requires converting data into the two lists above; old nested options and imperative seek/setData calls are not part of this API.

Accessibility, fallback and motion

A named region describes the globe, and hidden text lists every location and connection. The canvas has separate interaction instructions. Arrow keys rotate and Home resets when interaction is enabled. Wheel zoom is off by default so ordinary scrolling remains available. Use an external pause button with the handle or React paused prop for persistent pause control.

Reduced motion stops automatic rotation, route travel and pulses while preserving manual exploration. Rendering pauses when offscreen or the document is hidden. The server output includes a self-contained static SVG; if initialization fails, that fallback remains visible with a status message. The fallback is schematic, not a pixel-identical WebGL render. Custom colours are accepted without automatic contrast correction; check labels and focus visibility against your chosen background.

Detail and performance

Smaller dot spacing increases geometry. Higher pixel ratio increases GPU pixel work; route count and thickness increase draw cost. Spacing, grid spacing, marker shape/size, route width/elevation and network edits rebuild the relevant geometry. Colours, opacity and other live settings update the existing renderer. Keep pixel ratio at 1–2 and fewer routes on small devices. Limits bound input size but do not guarantee the frame-rate cap on every device. Browser performance, clean host installations and publication checks must be measured separately; source-level tests are not release certification.

Control reference

This table is generated from component.json, the authoritative defaults and limits. Route and marker distances are relative to globe radius. Dot and coastline sizes are multipliers; 1 preserves the baseline detail. Angles use degrees; speeds state cycles or degrees per second. Colour values are six-digit hex strings.

Composition

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | renderStyle | Globe style | atmosphere | atmosphere, cartographic, constellation | | sizing | Sizing | fill | fill, fixed | | height | Fixed / fallback height (px) | 560 | 240–1000 (editor step 10) | | scale | Globe scale | 0.96 | 0.3–1.5 (editor step 0.01) | | background | Background | #05070d | Six-digit hex colour | | transparent | Transparent background | false | true / false |

Content

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | accessibleLabel | Accessible description | Interactive globe showing a worldwide network. Drag or use arrow keys to explore. | Up to 240 characters | | locations | Locations: id / name / latitude / longitude | 6 example entries | 0–100 strings; 140 characters each | | connections | Connections: origin id / destination id | 7 example entries | 0–100 strings; 140 characters each |

Atmosphere

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | atmosphere | Atmosphere enabled | true | true / false | | coreColor | Sphere centre | #000000 | Six-digit hex colour | | warmColor | Upper rim | #ff7024 | Six-digit hex colour | | coolColor | Lower rim | #8b5cf6 | Six-digit hex colour | | warmStrength | Upper rim intensity | 1 | 0–3 (editor step 0.05) | | coolStrength | Lower rim intensity | 1 | 0–3 (editor step 0.05) | | warmWidth | Upper rim width | 0.12 | 0.01–0.5 (editor step 0.01) | | coolWidth | Lower rim width | 0.24 | 0.01–0.6 (editor step 0.01) | | rimSharpness | Rim sharpness | 2.5 | 0.5–8 (editor step 0.1) | | highlightStrength | Rim highlights | 1 | 0–2 (editor step 0.05) | | haloStrength | Outer halo intensity | 1 | 0–2 (editor step 0.05) | | haloWidth | Outer halo width | 0.08 | 0.01–0.3 (editor step 0.01) | | atmosphereAngle | Lighting angle (degrees) | 0 | -180–180 (editor step 1) | | surfaceOpacity | Sphere opacity | 1 | 0–1 (editor step 0.05) |

Geography

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | showLand | Land dots | true | true / false | | showCoast | Coastlines | true | true / false | | landColor | Land colour | #e2e8f0 | Six-digit hex colour | | coastColor | Coastline colour | #ffffff | Six-digit hex colour | | spacing | Dot spacing (degrees) | 1.2 | 0.6–4 (editor step 0.1) | | dotSize | Dot size | 1 | 0.4–5 (editor step 0.05) | | coastSize | Coastline size | 1 | 0.4–5 (editor step 0.05) | | landOpacity | Land opacity | 1 | 0–1 (editor step 0.05) | | coastOpacity | Coastline opacity | 1 | 0–1 (editor step 0.05) | | dotShape | Dot shape | circle | circle, square, diamond |

Grid

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | showGrid | Geographic grid | false | true / false | | gridColor | Grid colour | #527ba5 | Six-digit hex colour | | gridOpacity | Grid opacity | 0.2 | 0–1 (editor step 0.05) | | gridSpacing | Grid spacing (degrees) | 30 | 10–90 (editor step 5) | | showWireframe | Triangle mesh | false | true / false | | wireColor | Mesh colour | #326087 | Six-digit hex colour | | wireOpacity | Mesh opacity | 0.15 | 0–1 (editor step 0.05) |

Camera

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | latitude | Starting tilt (degrees) | 8.594 | -80–80 (editor step 1) | | longitude | Starting longitude (degrees) | 217.724 | -360–360 (editor step 1) | | roll | Roll (degrees) | 2.864 | -180–180 (editor step 1) |

Motion

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | rotationSpeed | Rotation (degrees / second) | 5 | -30–30 (editor step 0.5) | | autoRotate | Automatic rotation | true | true / false | | pauseOnHover | Pause on hover | false | true / false | | pauseOnDrag | Pause while dragging | true | true / false |

Interaction

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | interactive | Drag and keyboard | true | true / false | | zoom | Wheel zoom | false | true / false | | dragSensitivity | Drag sensitivity | 0.3 | 0.05–1 (editor step 0.05) | | keyboardStep | Keyboard step (degrees) | 5 | 1–30 (editor step 1) | | zoomMin | Minimum zoom | 0.6 | 0.3–1 (editor step 0.05) | | zoomMax | Maximum zoom | 1.5 | 1–3 (editor step 0.05) |

Routes

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | showRoutes | Routes enabled | true | true / false | | routeColor | Route colour | #f45300 | Six-digit hex colour | | routeOpacity | Route opacity | 0.85 | 0–1 (editor step 0.05) | | routeWidth | Route width | 0.002 | 0.0005–0.012 (editor step 0.0005) | | routeAltitude | Route elevation | 0.02 | 0.01–0.6 (editor step 0.01) | | animateRoutes | Travelling routes | true | true / false | | routeSpeed | Route travel speed | 0.18 | 0.01–2 (editor step 0.01) | | routeLength | Trail length | 1 | 0.05–1 (editor step 0.05) | | routeStagger | Route phase offset | 0.618 | 0–1 (editor step 0.01) | | routeAdditive | Additive route light | true | true / false |

Markers

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | showMarkers | Location markers | true | true / false | | markerColor | Marker colour | #f45300 | Six-digit hex colour | | markerSize | Marker radius | 0.006 | 0.002–0.04 (editor step 0.001) | | markerShape | Marker shape | disc | disc, sphere, diamond | | markerOpacity | Marker opacity | 1 | 0–1 (editor step 0.05) | | showPulses | Pulsing rings | true | true / false | | pulseSpeed | Pulse cycles / second | 0.55 | 0.05–2 (editor step 0.05) | | pulseSize | Pulse radius | 0.045 | 0.01–0.15 (editor step 0.005) | | pulseOpacity | Pulse opacity | 0.5 | 0–1 (editor step 0.05) |

Labels

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | showLabels | Location labels | true | true / false | | labelColor | Label text | #ffffff | Six-digit hex colour | | labelBackground | Label background | #111111 | Six-digit hex colour | | labelBorder | Label border | #111111 | Six-digit hex colour | | labelSize | Text size (px) | 10 | 8–24 (editor step 1) | | labelWeight | Text weight | 400 | 300–800 (editor step 100) | | labelRadius | Corner radius (px) | 0 | 0–20 (editor step 1) | | labelPadding | Padding (px) | 6 | 0–18 (editor step 1) | | labelOffset | Marker offset (px) | 10 | 0–40 (editor step 1) | | labelOpacity | Label opacity | 1 | 0.1–1 (editor step 0.05) | | labelUppercase | Uppercase labels | true | true / false | | labelFont | Font family | mono | mono, sans | | maxLabels | Maximum visible labels | 12 | 0–50 (editor step 1) |

Performance

| Setting | Effect / label | Default | Accepted values | | --- | --- | --- | --- | | pixelRatio | Maximum pixel ratio | 2 | 1–3 (editor step 0.25) | | frameRate | Frame rate cap | 60 | 15–60 (editor step 5) |

Dependencies and rights

Three.js and World Atlas notices ship in assets/. Geography is statically bundled. See component.json and the provenance record for the complete asset inventory and release rights disposition. No original carrier branding, photography or commercial fonts are required.