Skip to main content

Documentation Index

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

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

RetroElements.js is the Y2K widget toolkit for the Neon Retro Web portfolio. It ships four self-contained components that capture the visual language of the early internet: scrolling text tickers, blinking sticker badges, an under-construction warning panel, and a glowing hit-counter odometer. Each component is zero-dependency beyond React and the project’s shared Tailwind design tokens — drop any of them into a Window or directly onto a page.
In the compiled bundle, the four components are exported under the minified names M, B, U, and H. When building on top of this project always reference the source file (components/RetroElements.js) rather than the bundle to get the descriptive named exports shown below.

​
Import

// Source-level import (use this during development)
import {
  Marquee,           // exported as M in bundle
  BadgeNew,          // exported as B in bundle
  UnderConstruction, // exported as U in bundle
  HitCounter,        // exported as H in bundle
} from '../components/RetroElements';

​
Marquee

A full-width horizontal scrolling text ticker — the web equivalent of a news chyron. The text is repeated three times inside a single inline element so the loop appears seamless as the animate-marquee CSS animation cycles.

​
Props

​
text
string
required
The string to display inside the ticker. It is rendered three times in sequence to fill the track and create a smooth looping effect.
​
speed
string
default:"\"20s\""
A valid CSS animation-duration value (e.g. "10s", "30s"). Shorter values scroll faster. The default "20s" is comfortable for a full sentence of text on a typical viewport.

​
Usage

import { Marquee } from '../components/RetroElements';

// Default speed
<Marquee text="Welcome to my portfolio · Built with React · Powered by Y2K energy ·" />

// Faster scroll for a shorter label list
<Marquee
  text="JavaScript · TypeScript · React · Node.js · CSS ·"
  speed="12s"
/>

​
Visual Output

The Marquee renders as a full-width strip with a solid bg-y2k-magenta (hot-pink) background and border-y-2 border-y2k-teal top and bottom borders. The font-display text is white and rendered at text-xl. The entire strip clips its overflow so only the moving text is visible — no scrollbar appears.

​
BadgeNew

A rotated, blinking sticker badge inspired by the iconic “NEW!” and “UPDATED!” GIFs of early-2000s websites. The badge pulses via a .animate-blink CSS animation and tilts -6 deg for a hand-stuck sticker effect.

​
Props

​
text
string
default:"\"NEW!\""
The label text displayed inside the badge. Any short uppercase string works well — for example "HOT!", "BETA", or "v2".
​
color
"lime" | "magenta" | "teal"
default:"\"lime\""
The color variant controlling background, text, and border colors:
VariantBackgroundTextBorder
limebg-y2k-limetext-blackborder-y2k-teal
magentabg-y2k-magentatext-whiteborder-y2k-turquoise
tealbg-y2k-tealtext-blackborder-y2k-magenta

​
Usage

import { BadgeNew } from '../components/RetroElements';

// Default lime badge
<BadgeNew />

// Announce a new feature in magenta
<BadgeNew text="NEW!" color="magenta" />

// Custom label in teal
<BadgeNew text="BETA" color="teal" />

​
Visual Output

BadgeNew renders as an inline-flex <span> with a 2-pixel solid border, px-2 py-0.5 padding, and a hard box-shadow: 2px 2px 0px rgba(0,0,0,1) offset shadow for a retro offset-print look. The -rotate-6 transform tilts the badge counter-clockwise. The animate-blink animation causes it to flash on and off, drawing the eye. Text uses font-display font-bold uppercase tracking-widest for maximum period-correct impact.

​
UnderConstruction

A self-contained warning panel modelled after the “Under Construction” banners that adorned countless GeoCities pages. It features a pulsing triangle-alert icon, two spinning gear icons flanking a bold headline, and a dry subtitle. The component accepts no props — it is purely decorative.

​
Props

This component has no configurable props.

​
Usage

import { UnderConstruction } from '../components/RetroElements';

// Render anywhere — no configuration required
<UnderConstruction />

​
Visual Output

The panel renders as a column-flex <div> with border-2 border-dashed border-y2k-orange and a 10%-opacity orange background fill (bg-y2k-orange/10). The layout contains:
  • A triangle-alert Lucide icon (w-8 h-8) in text-y2k-orange with animate-pulse.
  • A row containing two settings (gear) Lucide icons in text-y2k-teal animate-spin-slow sandwiching the bold font-display headline “UNDER CONSTRUCTION” in text-y2k-orange text-lg.
  • A text-xs font-code text-y2k-orange/80 caption: “Pardon our dust. We’re compiling reality.”
Place UnderConstruction inside a Window component with title="WIP.exe" to create a convincing placeholder panel while sections of your portfolio are still in progress.

​
HitCounter

A digit-by-digit odometer display replicating the visitor counters that appeared in virtually every personal homepage of the Y2K era. Each character of the count string receives its own framed cell styled like a glowing LCD segment.

​
Props

​
count
string
default:"\"00042\""
The counter value as a string. Each character is split into its own display cell, so zero-padding ("00042" rather than "42") is intentional and preserves the fixed-width odometer aesthetic. Pass any string of digits you want displayed.

​
Usage

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

// Default padded value
<HitCounter />

// Custom count
<HitCounter count="01337" />

// Higher traffic milestone
<HitCounter count="100000" />

​
Visual Output

HitCounter renders as an inline-flex flex-col items-center container. A “Visitors” label sits above the digit track in text-[10px] font-code text-y2k-teal uppercase. The digit track is a flex row wrapped in border-2 border-gray-600 bg-black p-1 with an inset box-shadow (shadow-[inset_0_0_10px_rgba(0,0,0,1)]) to suggest a recessed display housing. Each individual digit cell is a w-4 h-6 flex box with:
  • bg-gray-900 background
  • border border-gray-800 inner dividers
  • text-y2k-lime font-display text-lg — the signature green-on-black LCD glow

​
All Four Together

import {
  Marquee,
  BadgeNew,
  UnderConstruction,
  HitCounter,
} from '../components/RetroElements';
import { Window } from '../components/Window';
import { Monitor } from 'lucide-react';

export default function RetroShowcase() {
  return (
    <Window
      title="RetroElements_Demo.exe"
      icon={<Monitor className="w-4 h-4" />}
      isActive={true}
    >
      {/* Full-width scrolling ticker at the top */}
      <Marquee
        text="React · Framer Motion · Tailwind CSS · Y2K Vibes ·"
        speed="18s"
      />

      <div className="p-4 space-y-6">
        {/* Inline badge labels */}
        <div className="flex items-center gap-3">
          <span className="font-code text-y2k-teal">Status:</span>
          <BadgeNew text="NEW!" color="lime" />
          <BadgeNew text="HOT" color="magenta" />
          <BadgeNew text="BETA" color="teal" />
        </div>

        {/* Under-construction placeholder */}
        <UnderConstruction />

        {/* Visitor counter */}
        <div className="flex justify-center">
          <HitCounter count="00777" />
        </div>
      </div>
    </Window>
  );
}

Window Component

Wrap RetroElements in the Window component for the full Y2K desktop panel experience.

Tailwind Config

The y2k-* color tokens (y2k-lime, y2k-magenta, y2k-teal, y2k-orange, etc.) used by these components are defined in the project’s Tailwind configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us