Live Visitor Counter — Real-Time Viewer Count UI

"23 people are viewing this right now" is a small but effective urgency cue used across e-commerce and ticketing sites — it signals active demand without the harder sell of a discount or a deadline. This snippet builds a believable live-counter widget: a pulsing presence dot, a count that drifts realistically rather than mechanically, and a tiny bump animation marking every change.

A random walk, not random noise

Rather than picking a fresh random number on every tick (which would jump around with no continuity and immediately look fake), step() nudges the *existing* count by ±1, occasionally ±2 on a 15% chance for a slightly bigger jump, clamped with Math.max(4, …) so it never drops to an unbelievable near-zero. This random-walk approach — each new value derived from the last, not generated independently — is what makes the number feel like it's tracking something real instead of visibly randomizing.

Irregular timing reads as more real than a fixed interval

Each update schedules the *next* one with setTimeout(step, 2200 + Math.random() * 2600) — a randomized 2.2–4.8 second gap — rather than a fixed setInterval. A perfectly regular tick is one of the easiest "this is fake" tells for any live-data widget; irregular timing, even though it's still simulated, matches how real, independent visitor arrivals and departures would actually look.

A pulsing dot built from one extra layer

The presence indicator is two stacked elements at the same position: a solid dot and a ::before pseudo-element of the same color that scales up to 2.6× while fading out on a 1.8-second loop — the classic CSS "ping" effect, requiring no JavaScript and no extra real DOM node beyond the one dot <span>.

A bump animation that announces the change without text noise

Every time the count updates, its number element gets a .bump class removed and immediately re-added (with a forced reflow via void countEl.offsetWidth so the animation retriggers even on consecutive updates) — a quick upward nudge-and-settle that draws the eye to the new value for an instant without a distracting color flash or a layout-shifting size change.

Use real data once you have it

This widget is built to demonstrate the interaction, not to manufacture demand — once connected to genuine concurrent-viewer data from real analytics, the exact same rendering and animation logic applies unchanged; only the source of the number differs. Treat the random-walk version as a placeholder for development and design review, not as something to ship in front of real visitors.