Skip to main content

Documentation Index

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

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

Marquee is a full-width scrolling ticker bar that evokes the animated text banners ubiquitous on personal websites of the early 2000s. It renders a single horizontal strip between the RetroNav and the <main> content area of the page layout, carrying a looping status message in bright neon lime on a black background. The scroll animation is powered entirely by a Tailwind CSS animate-marquee keyframe utility — no JavaScript timers, no requestAnimationFrame, just a smooth CSS translateX loop — and it pauses automatically when the user hovers over it.

​
Props

​
text
string
required
The message to display in the ticker. The string is duplicated four times inside the inner container (separated by six-space gaps) so the loop appears seamless: as one copy of the text scrolls off the left edge, the next copy is already entering from the right. Write your message once; the component handles the repetition.
​
className
string
Additional CSS classes applied to the outer container div. Use this to override the default border, background, or padding if you embed a Marquee in an unusual context outside the main layout.

​
Styling

The outer container applies: 
w-full overflow-hidden whitespace-nowrap border-y-2 border-y2k-gray bg-y2k-black py-2
The inner scrolling element applies: 
inline-block animate-marquee hover:[animation-play-state:paused]
font-mono text-y2k-lime text-sm tracking-widest
whitespace-nowrap on the outer element prevents the text from wrapping to a second line regardless of viewport width. overflow-hidden clips the scrolling content to the container’s bounds so no horizontal scrollbar appears.

​
Animation

The animate-marquee class maps to a custom Tailwind keyframe: 
@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
The animation runs over 25 seconds, is linear (constant speed — no ease-in or ease-out), and repeats infinitely. Hovering the ticker bar applies animation-play-state: paused via the Tailwind hover: arbitrary-value variant, letting readers stop the scroll to read the full message without it running away.

​
Current Usage in Layout

In the deployed site, Marquee is rendered immediately below RetroNav and above the main content area, carrying the site’s global status line: 
<Marquee text="*** WELCOME TO MY CORNER OF THE INTERNET *** CURRENTLY: DEBUGGING REALITY *** MOOD: SUSPICIOUS OF CSS ***" />
This placement means every page shares the same ticker bar without any per-page configuration. To change the global message, update the text prop in the Layout component.

​
Usage Example

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

// In a layout or page component
<Marquee text="*** STATUS: AVAILABLE FOR WORK *** STACK: REACT + NODE *** LOCATION: EARTH ***" />
Use *** delimiters between items — as seen in the live usage — to give the ticker its classic teleprinter visual rhythm. Keep the overall string short enough that two or three copies are visible at once during the scroll for the seamless-loop effect to read naturally.

Build docs developers (and LLMs) love

Get started for freeTalk to us