cobe.js — Lightweight WebGL Globe Skill

When to use

• A “spinning globe” / location markers in hero or about pages

• You want a small, focused globe lib (not full three.js)

• Decorative + interactive (markers, rotation) with minimal setup

Key APIs/patterns

• Core:

• import createGlobe from "cobe"

• const globe = createGlobe(canvas, { ...options, onRender(state) { ... } })

• Important options (common):

• devicePixelRatio , width , height

• phi , theta (rotation angles)

• scale , dark , diffuse

• baseColor , markerColor , glowColor

• markers: [{ location: [lat, lon], size, color? }]

• Lifecycle:

• globe.toggle() pauses RAF

• globe.destroy() removes instance

Common pitfalls

• Canvas sizing mismatch

• Set CSS size AND set canvas width/height scaled for DPR.

• Not updating on resize

• Recompute width/height and recreate or update params.

• Too high DPR on mobile

• Clamp DPR to 1–2.

Quick recipe: responsive globe with markers

import createGlobe from "cobe";

const canvas = document.getElementById("cobe"); let phi = 0;

function setup() { const rect = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio, 2); canvas.width = Math.round(rect.width * dpr); canvas.height = Math.round(rect.height * dpr);

const globe = createGlobe(canvas, { devicePixelRatio: dpr, width: canvas.width, height: canvas.height, phi: 0, theta: 0.2, dark: 0, diffuse: 1.2, scale: 1, mapSamples: 16000, mapBrightness: 6, baseColor: [0.2, 0.2, 0.25], glowColor: [1, 1, 1], markerColor: [0.8, 0.5, 1], markers: [{ location: [1.3521, 103.8198], size: 0.08 }], onRender: (state) => { state.phi = phi; phi += 0.01; }, });

return globe; }

let globe = setup(); window.addEventListener("resize", () => { globe.destroy(); globe = setup(); });

What to ask the user

• Globe size and placement (hero, section, card)?

• Marker locations + colors (brand-aligned)?

• Interaction needs (drag to rotate vs. ambient spin)?