Skip to main content

Documentation Index

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

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

Marquee brings back one of the most beloved (and mocked) HTML elements of the late 1990s. It renders a full-width black banner with green VT323-font text that scrolls continuously from right to left — evoking the amber-on-black aesthetic of DOS terminals and early web pages. The text is duplicated inline with a gap of spaces to create a seamless infinite loop. The component is styled with a Windows 98 inset border, making it an ideal footer or section divider inside a RetroWindow.

​
Props

​
text
string
required
The string to scroll across the banner. The text is rendered twice in sequence (separated by eight spaces) so the loop appears seamless — the second copy scrolls into view exactly as the first copy exits.

​
Usage

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

function AboutPage() {
  return (
    <div>
      <Marquee text="★ Welcome to my portfolio! ★  Under construction since 1999  ★  Best viewed in 800×600" />
      <p>Page content here...</p>
    </div>
  );
}

​
Behavior

​
Looping

The component renders a single inline-block div containing the text prop, eight non-breaking spaces ( ), and the text prop again: 
"Welcome!        Welcome!"
The .animate-marquee CSS class drives a translateX keyframe that moves the element exactly one copy-width to the left over 10 seconds, at which point the animation loops. Because both copies are identical and spaced identically, the transition between repetitions is invisible.

​
Styling

PropertyValue
BackgroundBlack
Text colourGreen (text-green-400)
FontVT323 (font-vt323), text-xl
Borderwin98-inset, 2 px border-win-gray
Animation.animate-marquee — 10 s linear infinite
The .animate-marquee keyframe must be defined in your global CSS or Tailwind config. The component applies the class name but does not embed the @keyframes definition.
Wrap Marquee in a container with overflow-hidden if it appears inside a layout that does not already clip its children — the scrolling inline-block can otherwise cause horizontal scroll on the page.
The original HTML <marquee> element is deprecated and should not be used. This component achieves the same visual effect with a CSS animation and is fully compatible with modern browsers and React.

Build docs developers (and LLMs) love

Get started for freeTalk to us