Live Counter

A live number widget wired to your real data. If the endpoint is not connected, it shows nothing, not a fake count.

Copied 0 times.

12,483

members

as of page load

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a live counter widget for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- Presentation: a small stat card with the number large on top (about 2.5x body size, bold) and the label under it in a muted color, comfortable padding, subtle border or background tint, suitable for a stats row.
- The number uses tabular figures and formats with Intl.NumberFormat from a locale config (12,483 not 12483).

DATA AND HONESTY
- The counter reads its value from a real data endpoint: one config constant holds the URL, and a clearly marked TODO explains what the endpoint must return (a JSON object with a single numeric value) and where to wire my real source (members, orders, signups, active users).
- Never fabricate the number, never increment it on a timer, never randomize it to look alive. If the endpoint is unset, unreachable, or returns something invalid, the widget does not render at all: no spinner left behind, no stale placeholder.
- The label under or beside the number says exactly what is being counted ("members", "orders shipped"); label text lives in the config next to the URL.

UPDATE BEHAVIOR
- Fetch the value once on page load. No polling: the number is accurate as of the visit, which is honest and cheap.
- When the value changes, animate the transition briefly (a quick count-up over max 600ms); respect prefers-reduced-motion by swapping instantly. Reserve the number's width so nearby content never shifts as digits change.

QUALITY
- The widget is an aside or span-level element with an aria-label combining number and label ("12,483 members"); updates use aria-live="polite" only when polling is on.
- WCAG AA contrast; the number is real text, never an image.
- Failure handling is silent: log to console in development, render nothing in production. A wrong number is worse than no number.

QUESTIONS
- Before you build, find or ask for: the real data endpoint to read and exactly what is being counted. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The live counter shows one number you're proud of, members, orders, signups, pulled from your real data every time. Numbers persuade, but only real ones, and this widget can't show anything else. One honest number beats a paragraph of bragging.

Reads its value from a source you connect: your members, orders, or signups.
Source missing, unreachable, or answering nonsense? The widget shows nothing at all, no spinner, no stale number.
Faking is forbidden by name in the code: no ticking up on a timer, no randomizing to look alive.
When the real value changes, it counts up briefly; the label says exactly what's being counted.

How it works

1Pick the presentation: a plain number that sits inside a sentence, or a small stat card with the label sitting underneath it.
2Choose how it updates: fetched once when the page loads, or refreshed every 60 seconds while the tab is open.
3Copy the prompt, one pasteable block of build instructions, into whichever AI you use.
4Point the marked spot at your real data source, your members, orders, or signups; the code explains exactly what that source must answer with.
5Write the label so it says precisely what's counted, members or orders shipped, never something fuzzier than the truth.
6Unplug the source once as a test, and the widget should vanish cleanly instead of showing a spinner or an old number.

What you can customize

Presentation: plain drops into a sentence like join 12,483 members; the card stands alone with the big number on top.
How it updates: on load is honest and cheap, accurate as of the visit; polling keeps it fresh every 60 seconds while the tab is open.
Size, color, and number formatting adapt to your site automatically, because your AI builds the counter right inside your own design.

You'll also like

Follow along

New drops and behind-the-scenes, first.

IGTTXinYTf

Maybe later

Social Follow Popup

A light popup inviting visitors to follow you on social media, with icon buttons for the networks you pick.

Pick a box, win a prize

Try it: pick a box. The prize is drawn by weight before it opens.

Gift Box Reveal

Pick a box, get a prize drawn from your real weighted odds. The pick is theater; the draw is honest.

Your Site

Some other tab

Simulated tab strip. On your site this runs on the real browser tab.

Tab Attention Title

When visitors switch to another tab, your tab title swaps to a come-back message, and restores the moment they return.