Live visitors

Tab

Reaches the pause button. The map and lists are read-only.

EnterorSpace

Pauses or resumes live updates.

• The card is a labelled section; the count is read once as plain text ("128 people on the site now"), and the rolling digits are hidden from screen readers.
• The pause button is a toggle with aria-pressed and a label that names the action; its tooltip says the same.
• Status is never color alone: the dot always sits next to Live, Paused, Connecting or Reconnecting.
• Each event row reads as one sentence with the country spelled out and the time in words ("Signed up, Berlin, Germany, 12 seconds ago"). Flags are decorative.
• The map is decorative and hidden; the same information is in the lists.
• Count changes are not announced, so screen readers are not flooded. A polite live region reports pause and resume, and says when the stream is simulated.

• Digits roll on their own strips (280ms ease-out) with tabular numerals, so the number never changes width; a new leading digit (99 to 100) grows in.
• New visitors fade in on the map with one ring that expands and fades (900ms); events get a stronger ring and a small city label for 2s. Expired dots fade out over 400ms.
• Page rows and event rows move as one step: rows slide by one row height (280ms), the new row fades in (160ms) and the last one fades out below the clip. Bars ease to their new width.
• The live dot pulses every 1.6s only while live and on screen. The state label crossfades (out 100ms, in 160ms) in a reserved width.
• Reduced motion keeps every update but drops the rolls, rings, slides and pulse.

• Holds 640px at most and fills narrower containers through a container query.
• Below 520px card width the two lists stack and padding drops to 16px; the map scales with the card.
• Paths, cities and labels truncate with an ellipsis; counts and times keep fixed right-aligned columns.

• The land is one SVG path of round caps computed once; pings are a handful of circles.
• Rows, bars and digits move with CSS transforms and widths on absolutely positioned elements, so nothing reflows the card.
• The pulse, clock and simulation stop while the card is off screen (IntersectionObserver) or paused.

• Pick this for a realtime analytics view, an admin home or a launch day dashboard tile that answers who is here right now.
• Without count it is a self-playing demo. As soon as you pass count, pass pages, visitors and events too.
• Send arrivals as a rolling window (ids that stay for 5 to 8 seconds); the component handles enter and exit animations from id changes.
• Keep event labels short and past tense (Signed up, Upgraded to Pro) and never show personal data such as emails in the ticker.
• Use connection to reflect the socket state instead of hiding the card.

The full library index for assistants is at /llms.txt.