Live globe

Drag to turn it. With zoom on, click a pin to fly in to that country and anywhere else to fly out.

A visitor does not get a pin of their own: the land dot nearest to them lights up, so pins sit on the map's own grid. Live visitors ping; recent ones sit faint. A chip names the place nearest the front, with a count when more than one person is there.

Pass one marker per place, not per session: group sessions within about 11km (a city) and set count. With countryCode, pins close together roll up into one per country when the globe is zoomed out.

When someone new lands, give their marker an arrivedAt and change focus to their place with a new key: the globe eases round to face them and their pin flashes.

When everyone is in one place, pass it as holdAt: the globe eases there and stops spinning, so the view stays where the action is. A drag still works and is respected afterwards.

Land dots in ink, pins in the accent: teal in light, mint in dark. Chips sit on the canvas colour.

size is the canvas; the sphere is 0.76 of it, leaving room for chips and the zoom hint. So a 520px canvas draws a world about 400px across. The canvas is drawn at a fixed pixel size, so when its column changes width, measure it and pass a new size (in steps, as the store dashboard's home page does in 20px steps) rather than scaling it with CSS.

width makes the canvas wider than tall, which gives a zoomed-in map room to breathe. safeInset keeps chips clear of a top and bottom band a parent may clip.

The canvas reads four custom properties at draw time. They map to tokens, so the globe follows light, dark and any ThemeScope around it. Set them on a parent to restyle one globe.