How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
The map
- A panel in a 16 : 10 shape that is as wide as its box, with 6% padding all round. The land is made of overlapping ellipses (North America, Central America, South America, Europe, Africa, Asia, South-East Asia, Oceania); dots are placed on a grid inside them, one every 2.2% across and 3.6% down, each 0.42% in radius. The dots stretch with the panel, so they are slightly oval, which is part of the look.
- Pins are placed in percentages of the panel (x, y). Each has an orange 12px dot with a cream ring and a small uppercase label in a dark pill.
Reveal
- The first time the map is 35% on screen, each dot pops from nothing to full size (0.6s, a soft ease-out), delayed by how far across it is (up to 0.9s, after 0.3s). The pins pop in one after another, 0.12s apart, starting after 1s. This plays once.
Pulse
- Each pin's ring grows to 3.4 times its size while fading out, every 2.4s, forever. The pins' rings start 0.3s apart so they never pulse together.
Lens (mouse and pen only)
- Dots within 14% of the pointer swell up to 2.5 times their size and shade from cream to orange, strongest under the pointer (the effect falls off with the square of the distance, and distance is measured 1.6 times stronger vertically so it forms a wide, flat lens). It is smoothed (16% per frame) and the loop stops when everything is at rest.
Pins
- Hovering a pin (mouse) or focusing it (keyboard) turns its label orange and opens its note: a cream card that grows from the pin (0.35s) 10px below it. A tap on a touch screen opens it and a tap anywhere else, or the Escape key, closes it. The note is announced to screen readers when it opens. Pins without a note just light up. Fallbacks: on phones the labels are hidden until a pin is tapped. With "reduce motion" on, everything is simply there: no pop-in, no pulse, no lens.