Backgrounds

Cobe

The famous interactive 3D globe — 1.5 KB, WebGL, butter-smooth.

Live democobe

Cobe is the tiny (~1.5 KB) WebGL globe seen on Stripe, Vercel, and countless product pages. Dotted, glowing, hypnotic — drop in a canvas, pass markers, done.

Install

npm i cobe

Snippet

import createGlobe from "cobe";

useEffect(() => {
  let phi = 0;
  const globe = createGlobe(canvas, {
    devicePixelRatio: 2,
    width: 600,
    height: 600,
    phi: 0,
    theta: 0.3,
    dark: 1,
    diffuse: 1.2,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.3, 0.3, 0.7],
    markerColor: [0.1, 0.8, 1],
    glowColor: [0.5, 0.3, 1],
    markers: [
      { location: [37.7595, -122.4367], size: 0.03 },
      { location: [40.7128, -74.006], size: 0.1 },
    ],
  });

  const tick = () => {
    globe.update({ phi: (phi += 0.004) });
    requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);

  return () => globe.destroy();
}, []);