Skip to main content

Documentation Index

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

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

VisitorCounter recreates the iconic 7-segment LED counter that lived in the sidebar of every GeoCities page. It displays a 6-digit zero-padded number in red-on-black with a soft neon glow — as if each digit is lit from within by a tiny cathode-ray tube. On mount, it ticks from 001336 to 001337 after a 1.5-second delay, giving the visitor the satisfying sensation of being the one who pushed the number over.

​
Props

VisitorCounter accepts no props. The starting count and the tick-up delay are baked into the component.
​
(none)
–
Drop <VisitorCounter /> anywhere in your layout — no configuration required.

​
Counter Logic

The component initializes state at 1336. A useEffect runs once on mount and schedules a setTimeout of 1500ms that increments the count by one. The cleanup function clears that timer if the component unmounts before it fires. 
const [count, setCount] = useState(1336);

useEffect(() => {
  const timer = setTimeout(() => {
    setCount((prev) => prev + 1);
  }, 1500);
  return () => clearTimeout(timer);
}, []);
After 1.5 seconds, count becomes 1337 — a deliberate easter egg for the technically inclined visitor.

​
Digit Rendering

The count is formatted as a 6-character zero-padded string, then split into individual characters so each digit gets its own styled div: 
const digits = count.toString().padStart(6, '0').split('');
// e.g. ['0', '0', '1', '3', '3', '7']
Each digit div carries the following classes and inline style: 
<div
  className="bg-zinc-800 text-red-500 font-pixel text-3xl px-2 py-1 border border-zinc-600 shadow-inner"
  style={{ textShadow: '0 0 5px rgba(255,0,0,0.5)' }}
>
  {digit}
</div>
Style detailValueEffect
bg-zinc-800dark grey cell backgroundindividual segment housing
text-red-500Tailwind red-500bright LED red digit
font-pixelcustom pixel fontdot-matrix character rendering
text-3xl1.875remlarge, easily readable digit
border border-zinc-600medium grey bordersegment cell boundary
shadow-innerinset box shadowrecessed-screen depth effect
textShadow: '0 0 5px rgba(255,0,0,0.5)'5px red glowneon LED bloom

​
Container Styling

The outer wrapper centers the label and digit panel vertically: 
<div className="flex flex-col items-center my-6">
  <div className="font-comic text-sm mb-1 font-bold">YOU ARE VISITOR:</div>
  <div className="flex gap-1 bg-black p-2 bevel-container-inset">
    {digits.map((digit, i) => (
      <div key={i} className="bg-zinc-800 text-red-500 font-pixel text-3xl px-2 py-1 border border-zinc-600 shadow-inner"
           style={{ textShadow: '0 0 5px rgba(255,0,0,0.5)' }}>
        {digit}
      </div>
    ))}
  </div>
</div>
  • font-comic text-sm font-bold — the “YOU ARE VISITOR:” label uses Comic Sans (via font-comic) in bold small caps
  • bg-black p-2 bevel-container-inset — the digit panel sits on a pure black background inside a custom bevel-container-inset class that adds an inset bevel border, replicating the look of a real LCD housing
  • flex gap-1 — digits are laid out in a row with a 4px gap between cells
The bevel-container-inset utility is a custom Tailwind class defined in the project’s global CSS. It applies an inset box-shadow to simulate the beveled plastic border of a physical LED display.

​
Usage

Drop <VisitorCounter /> anywhere in your layout. In the Webmaster project it lives in the homepage sidebar, but it will work in any container: 
import { VisitorCounter } from './components/VisitorCounter';

export function Sidebar() {
  return (
    <aside className="w-48 flex flex-col items-center">
      <VisitorCounter />
      {/* other sidebar widgets */}
    </aside>
  );
}
For extra authenticity, wrap VisitorCounter inside a bevel-container div and surround it with a couple of Button88x31 components — the classic Web 1.0 sidebar stack.

Build docs developers (and LLMs) love

Get started for freeTalk to us