Live pings and tours

Pings

A one-shot expanding ring with an optional label: the "someone in Berlin just signed up" moment, with no backend.

globe.ping({
  lat: 52.52,
  lon: 13.4,
  emoji: "✨",
  label: "Someone in Berlin just signed up",
});

Loading globe…

Field	Default	Meaning
lat, lon	required	Where
label, emoji	Not set	Text shown in a pill above the point
color	theme live
rings	3	Expanding rings
radius	46	Peak radius in px
duration	2600	Lifetime in ms
burst	false	true for 14 particles, or a count
flyTo	false	Centre the view on it

A feed

pingFeed replays a list on a timer and returns a handle.

const feed = globe.pingFeed(events, { interval: 1800, loop: true });
feed.stop();

Wire it to whatever you already have: a websocket, a polling endpoint, or a canned list for a landing page. The library takes no position on where events come from.

socket.on("signup", (e) => {
  globe.ping({ lat: e.lat, lon: e.lon, label: `${e.name} joined from ${e.city}` });
});

Tours

Fly between points on a timer. Good for kiosks, demo videos and office dashboards.

const tour = globe.tour(cities, { dwell: 2600, zoom: 2.2, loop: true });
tour.stop();

Loading globe…

Points accept { lat, lon } or [lon, lat]. onStep fires on each hop, so you can sync a caption.

Scroll stories

story() drives the view from an element's scroll progress. center and zoom interpolate between steps; every other key applies at the step boundary.

globe.story(document.querySelector("#section"), [
  { at: 0,   center: [0, 20],   zoom: 1 },
  { at: 0.4, center: [72, 23],  zoom: 3, markers: indiaMarkers, preset: "hologram" },
  { at: 0.8, center: [-74, 40], zoom: 2.5, preset: "midnight" },
], {
  onStep: (step, i) => setCaption(i),
});

globe.stopStory();

The element should be tall: that is what gives the scroll something to travel through:

#section { height: 300vh; }
#section canvas { position: sticky; top: 10vh; }

Reduced motion

All of this respects prefers-reduced-motion. Pulses hold still, arcs stop travelling, flyTo jumps instead of easing, and ping bursts do not fire. Set You can opt out with respectReducedMotion: false, but use that setting only when motion is necessary.

Cleaning up

destroy() stops tours, stories, timelines and feeds. If you start them outside a component lifecycle, keep the handles and stop them yourself.