--- /** * Globe — a GitHub-style interactive world globe rendered with three.js * and three-globe: a dark shaded sphere with hex-polygon continents, an * atmosphere glow, and animated arcs travelling between coordinates with * pulsing rings at their origins. * * The scene runs in a custom element: WebGL renderer (transparent, * DPR-capped), perspective camera locked at the original's distance, the * original's light rig, and OrbitControls with auto-rotation and * constrained polar angles. The render loop pauses offscreen and when the * tab is hidden; reduced motion renders a static lit globe with full arcs. */ interface GlobeArc { /** Animation stagger group — arcs share a dash phase per order. */ order: number; startLat: number; startLng: number; endLat: number; endLng: number; /** Arc apex altitude relative to the globe radius (0-1ish). */ arcAlt: number; /** Arc + pulse color (hex or rgb/rgba string). */ color: string; } interface GlobeConfig { /** City marker dot size. Default 1. */ pointSize?: number; /** Sphere color. Default '#1d072e'. */ globeColor?: string; /** Show the atmosphere glow. Default true. */ showAtmosphere?: boolean; /** Atmosphere glow color. Default '#ffffff'. */ atmosphereColor?: string; /** Atmosphere thickness relative to radius. Default 0.1. */ atmosphereAltitude?: number; /** Sphere emissive color. Default '#000000'. */ emissive?: string; /** Sphere emissive intensity. Default 0.1. */ emissiveIntensity?: number; /** Sphere specular shininess. Default 0.9. */ shininess?: number; /** Hex-polygon continents + ring color. Default 'rgba(255,255,255,0.7)'. */ polygonColor?: string; /** Ambient light color. Default '#ffffff'. */ ambientLight?: string; /** Left directional light color. Default '#ffffff'. */ directionalLeftLight?: string; /** Top directional light color. Default '#ffffff'. */ directionalTopLight?: string; /** Point light color. Default '#ffffff'. */ pointLight?: string; /** Arc dash travel time in ms. Default 2000. */ arcTime?: number; /** Arc dash length (0-1 of the arc). Default 0.9. */ arcLength?: number; /** Ring emission count per period. Default 1. */ rings?: number; /** Max ring radius in degrees. Default 3. */ maxRings?: number; /** Latitude/longitude the camera initially faces. */ initialPosition?: { lat: number; lng: number }; /** Auto-rotate the camera. Default true. */ autoRotate?: boolean; /** Auto-rotation speed. Default 1. */ autoRotateSpeed?: number; } interface Props { /** Additional classes for the root element. */ class?: string; /** Scene configuration (colors, lights, arc/ring timings, rotation). */ globeConfig?: GlobeConfig; /** Arcs to draw between coordinates; endpoints become pulsing markers. */ arcs?: GlobeArc[]; } const { class: className, globeConfig = {}, arcs = [] } = Astro.props; ---

Installation

Install dependencies

Add these files

Configuration

Use it