Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt

Use this file to discover all available pages before exploring further.

VisitorCounter brings back the beloved website hit counter of the 1990s — those little odometer-style digit displays that adorned the footers of every Geocities and Angelfire page, proudly reporting visitor number 000042 to anyone who cared to look. This component renders a six-digit retro counter using black-on-lime digit cells and a pixel-font label, backed by the browser’s localStorage so the count persists across page refreshes in the same browser.

​
Props

This component accepts no props. Drop it anywhere on the page and it handles everything internally.

​
Import

import { V as VisitorCounter } from '../components/Primitives.js';

​
Usage

<VisitorCounter />

​
How It Works

The counter logic runs inside a useEffect on mount:
  1. Read from storage — localStorage.getItem("visitor_count") is checked for an existing value.
  2. Initialise or increment — If no value is stored yet (first visit in this browser), the counter initialises to 1337. On every subsequent mount (page load / navigation), a random integer between 1 and 5 is added to simulate new visitors arriving.
  3. Persist the new value — The updated count is written back to localStorage via localStorage.setItem("visitor_count", ...).
  4. Render as digits — The numeric count is converted to a string and zero-padded to exactly 6 characters with padStart(6, "0"), then split into an array of individual digit characters.
Each digit is rendered as its own <div> with the classes w-4 h-6 bg-black text-retro-lime font-pixel text-sm flex items-center justify-center border-r border-gray-800, creating the individual segmented cells. The cells sit inside a border-2 border-gray-800 bg-black p-1 shadow-win-in container, and the whole assembly is labelled above with "You are visitor:" in a small pixel-font caption.
The counter is entirely client-side and local to the current browser. Each visitor’s browser maintains its own independent count in its own localStorage. There is no server, no database, and no shared state — two different visitors will each see their own personal counter value, not a shared global tally. This matches the spirit of the 1990s originals, which were equally unreliable, and is perfect for decorative or nostalgic purposes.
To change the starting count or the increment range, edit the initialisation block inside Ic in components/Primitives.js:
// Current implementation (inside useEffect):
const stored = localStorage.getItem("visitor_count");
const next = stored
  ? parseInt(stored, 10) + Math.floor(Math.random() * 5) + 1
  : 1337;  // ← change the seed value here
  • Starting count — replace 1337 with any number (e.g. 9000 for an “over 9000” joke, or 1 if you prefer an honest start).
  • Increment range — Math.floor(Math.random() * 5) + 1 produces 1–5. Change 5 to widen the range or set the whole expression to a constant (e.g. 1) for a predictable single-step increment.

Build docs developers (and LLMs) love

Get started for freeTalk to us