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)?