Live Viewer Count
One ring per arrival, digits rolling to the new total, and the size of the jump floating off above it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Live Viewer Count
*
* People arriving at a live stream: the badge sends out one ring per
* arrival, the count rolls digit by digit, and the size of the jumpAbout this pattern
A live audience number is only interesting when it changes, so the motion is tied to arrivals rather than to a clock: each batch of people joining sends exactly one ring out of the badge and rolls the digits that actually changed. A badge that pulses forever spends attention it will need later, when something genuinely happens — this one is quiet between events. The digits roll on a tween in fixed-width tabular slots, never a spring, because numerals that overshoot and settle back read as a fault rather than as energy, and the row around them must not reflow while the number grows. The floating delta is the only flourish, and it is translation and opacity alone.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
A red live badge sits beside a viewer count that updates while the stream runs.