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