Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

HitCounter is a nostalgic visitor-count widget straight out of the GeoCities era. Every time the component mounts it reads the y2k_hits key from localStorage, increments the value by one, writes it back, and displays the result as a six-digit number. Each digit is rendered as an individual red-on-black LCD-style tile, recreating the flip-counter aesthetic common on late-1990s personal websites. Place it anywhere a bit of retro flair is needed — the footer of a page, the sidebar of a RetroWindow, or alongside a Webring. HitCounter accepts no props.

​
Usage

import { HitCounter } from './components/y2k/HitCounter';

function Footer() {
  return (
    <div className="flex items-center gap-2">
      <span className="font-pixel text-xs">You are visitor</span>
      <HitCounter />
    </div>
  );
}

​
Internal State

State variableTypeDescription
countnumberThe current visit count, initialised to 0 and set on mount by the useEffect that reads and increments localStorage.

​
Lifecycle

On mount, the single useEffect runs the following logic: 
const stored = localStorage.getItem('y2k_hits');
const next   = (stored ? parseInt(stored, 10) : 1336) + 1;
localStorage.setItem('y2k_hits', next.toString());
setCount(next);
  • If y2k_hits does not exist in localStorage (first visit), the counter starts at 1337 (1336 + 1) — a nod to leet-speak culture.
  • On every subsequent visit the stored value is parsed, incremented, persisted, and reflected in state.

​
Display format

The count value is converted to a string and left-padded with 0s to six characters using .toString().padStart(6, '0'). Each character is then mapped to an individual div: 
001337  →  [ 0 ][ 0 ][ 1 ][ 3 ][ 3 ][ 7 ]
Each digit tile is 16 × 24 px, styled with a black background, text-red-500 VT323 font at text-xl, and a faint border-r border-red-900/30 divider (omitted on the last digit via last:border-0). The whole counter sits inside a win98-inset border box.
The counter is stored in localStorage, which is scoped to the browser and origin. Clearing browser data or opening the site in a private/incognito window will reset the counter to 1337 for that session.
Because localStorage is a client-side API, HitCounter will throw during server-side rendering. Wrap it in a lazy/dynamic import with ssr: false if you are using a framework with SSR (e.g. Next.js).
For a shared “global” counter across all users, replace the localStorage read/write in the useEffect with an API call to a lightweight serverless endpoint or a service like Supabase.

Build docs developers (and LLMs) love

Get started for freeTalk to us