Skip to main content

Documentation Index

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

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

The Layout component is the outermost wrapper for every page in Web Surfer. It stitches together the teal header bar, the animated PageTransition region, and the retro footer complete with a scrolling webring marquee — all on top of a warm bg-win-cream background. A SparkleCursor canvas overlay sits at the very top of the stacking context so sparkle effects are always visible across the entire viewport.

​
Component structure

Layout is composed of three primary regions rendered inside a full-height flex column:
RegionPurpose
<header>Teal bar — visitor counter (left) and last-updated date (right)
<main>Flex-grow content area — wraps children in PageTransition
<footer>Copyright notice + scrolling webring Marquee
Wrap your page content with Layout like this: 
<Layout>
  <YourPageContent />
</Layout>
The Layout component is automatically applied to all routes in the app — you do not need to wrap individual pages manually.
The header bar uses bg-win-teal text-white and is split into two sides with justify-between:
  • Left side — the VisitorCounter component (described below).
  • Right side — a small italic string displaying today’s date, formatted with new Date().toLocaleDateString().
The header has a bottom border (border-b-4 border-win-teal-light) and a drop shadow to lift it above the page content.

​
VisitorCounter

The visitor counter is the retro hit-counter widget rendered in the left side of the header. It displays the label YOU ARE VISITOR: followed by a 7-digit number shown as individual digit tiles.
  • Font: font-pixel (Press Start 2P) at text-xs
  • Digit tiles: lime green text (text-y2k-lime) on a black background (bg-black), separated by subtle border-gray-800 dividers
  • The counter starts at 1333337 and increments by 1 every 1500 ms via a setTimeout loop
// VisitorCounter renders something like:
// YOU ARE VISITOR: [0][1][3][3][3][3][8]
Each digit is padded with padStart(7, "0") so the display always shows exactly 7 characters.

​
PageTransition

Whenever the active route changes, PageTransition intercepts the render and shows a full-screen Win98-style loading dialog for 800 ms before revealing the incoming page. The dialog is centred over a bg-win-teal overlay and contains:
1

Spinning ball

A w-8 h-8 bg-win-blue rounded-full animate-spin border-4 border-dashed border-white div — a solid navy circle with a dashed white border that spins, evoking the classic Netscape Navigator loading indicator.
2

Loading label

A font-pixel text-xs text-win-blue label reading “Loading page…”
3

Progress bar

A Framer Motion motion.div that animates its width from 0% to 100% over 700 ms with a linear ease, drawn inside a shadow-bevel-inset track.
4

Modem label

A small grey caption reading “Dialing 56k modem…” beneath the progress bar.
The dialog itself fades in and out using Framer Motion’s AnimatePresence in "wait" mode (initial opacity: 0, animate opacity: 1, exit opacity: 0). After 800 ms the timeout clears, the overlay is removed, and the incoming page is revealed. 
// PageTransition wraps children and watches useLocation()
<PageTransition>
  {children}
</PageTransition>
Accessibility: If the user has enabled prefers-reduced-motion: reduce in their OS settings, PageTransition skips the animation entirely and swaps the page content immediately without showing the loading dialog.

​
Webring marquee

The footer contains a Marquee component — a horizontally scrolling strip of retro webring links rendered inside a bg-win-gray bar with top and bottom border lines. The inner content div uses animate-marquee (a custom Tailwind keyframe that translates from 100% to -100% over 15 seconds, linear, infinite) and the following link set: 
🕸️ WEBRING 🕸️  |  < Prev Site  |  Random Site  |  Next Site >
🕸️ WEBRING 🕸️  |  Join the Ring!  |  Webmaster: devname@hotmail.com
Hovering over the strip pauses the scroll via the Tailwind arbitrary-property class hover:[animation-play-state:paused], so visitors can click individual links without the text racing past.

Build docs developers (and LLMs) love

Get started for freeTalk to us