Centered Online Pulse Hero Block for React

The count is the ONLINE constant at the top of the file; the board's avatar overflow (+244) is worked out from it, so the two always agree. Feed it from your presence service (a WebSocket or server-sent events subscription, or a polling endpoint) and pass each new number to CountingNumber: it counts on from the number showing to the new one. Update it every ten seconds or so rather than on every join and leave, since the pill is a polite status region and every change is read out.

Use StatusPulseText's props: variant picks the dot's theme colour (success by default, or info, warning, destructive, muted), duration sets one pulse in milliseconds (never faster than one a second), and pulse={false} keeps the dot still, for a status where nothing is happening. The ring is a CSS animation of scale and opacity, so no script runs, and with reduced motion only the dot shows.

The board is drawn from two arrays at the top of the file: COLUMNS, each with a name and its card titles, and CURSORS, each a name and a place, the Tailwind classes that put it on the board (start-[26%] top-[13.5rem]). They use logical start- offsets, so a right-to-left page mirrors them. The cursors glide in with a CSS transition on first paint; with reduced motion they appear in place. The whole board is decoration, so it is hidden from assistive technology and takes no focus.

The pill is a status region, the role Announcement takes when it isn't a link, and it reads Online now, 247 people in Parley right now. The number keeps its final value in visually hidden text from the first render, so the count is never read digit by digit. The pulsing dot is decorative: the words carry the status. The board, its avatars and its cursors are hidden from assistive technology, so the page reads as the headline, the promise and the two actions.

The headline drops its forced line break and wraps, balanced, at text-4xl, and the two actions stack. The Shine Button ends about 370 px down the first screen, and the top of the board shows below it. The board shrinks to two columns and a shorter window, and its third cursor is dropped, so nothing crowds the cards.

Use it when your product gets better with people in it at the same time: collaboration tools, chat, live events, multiplayer editors. A live count says the room is busy now. When the number that matters is cumulative, such as total customers or lifetime revenue, a static stats hero says it without implying a live feed.