Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt
Use this file to discover all available pages before exploring further.
HitCounter is a self-contained widget that pays homage to the animated GIF visit counters plastered across every personal homepage in the late 1990s. It renders a row of individual LCD digit cells — each one a dark-background box with a font-vt323 text-retro-pink number inside — along with a "YOU ARE VISITOR" label above the digits. Each digit animates independently using Framer Motion’s AnimatePresence in "popLayout" mode, so when the count increments the old digit slides down and out while the new one slides in from above, producing a slotted odometer effect.
Import
Usage
HitCounter requires no props. Drop it anywhere in your layout or page:
What it renders
The component mounts with a seed count of4287 and increments by 1 on every navigation (i.e. every time location.pathname changes, detected via React Router’s useLocation). The count is zero-padded to 6 digits and split into individual characters, each rendered inside its own animated cell:
w-4 h-6 with bg-gray-900 border border-gray-700, housing a motion.span that animates y from -20 (entering from above) to 0 (settled) and exits to y: 20 with a 0.3s ease transition. The outer container uses bg-black p-2 border-4 border-win-gray border-outset shadow-win-out to create the raised black-bezel look of a physical LCD panel embedded in a Win98 widget.
Placement in Digital Domain
In the Digital Domain codebase,HitCounter is rendered inside the site Layout component:
- Desktop view — appears in the top-right area of the header bar, next to the site navigation controls.
- Mobile view — rendered as a floating element so it remains visible without taking up inline space in the compressed nav.
<HitCounter /> call in components/Layout.js with wherever suits your design.
Customisation
BecauseHitCounter is a zero-prop component, visual customisation requires editing the component source directly. The key classes to modify are:
| Element | Default classes | What to change |
|---|---|---|
| Outer container | flex flex-col items-center bg-black p-2 border-4 border-win-gray border-outset shadow-win-out | Background, border colour, shadow depth |
| Label | text-retro-yellow font-vt323 text-xs mb-1 uppercase tracking-widest | Colour, size, copy |
| Digit cell | relative w-4 h-6 bg-gray-900 border border-gray-700 overflow-hidden | Cell size, background darkness |
| Digit character | font-vt323 text-retro-pink text-xl | Colour, size — try text-retro-yellow or text-retro-teal |
HitCounter.js is the largest pre-built component file in the components/ directory because it bundles the React Router runtime (React Router v6 + @remix-run/router) alongside Framer Motion’s AnimatePresence and the component logic itself. All other components import their dependencies from ../assets/proxy.js, but HitCounter.js acts as the entry point that also includes the full router context needed by useLocation. This is an artefact of the Vite chunk-splitting strategy — if you inspect the network tab you will see HitCounter.js is also what delivers HashRouter, Routes, and Route to the application.