Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt
Use this file to discover all available pages before exploring further.
MarqueeText recreates the classic <marquee> HTML element — a staple of 1990s web design — using Framer Motion for smooth, hardware-accelerated animation instead of CSS. Rather than relying on the deprecated <marquee> tag or a CSS translateX keyframe, the component drives the scroll through Framer Motion’s animate API, which hands the animation off to the browser’s compositor thread for jank-free performance. The result is an infinitely looping text ticker styled with green-on-black retro terminal colours.
Props
The text content to scroll across the banner. Rendered as an inline block inside the overflow-hidden container.
Animation duration in seconds for one full pass of the text across the viewport. A lower value means faster scrolling; a higher value produces a slower, more ambient crawl.
Import
Usage
Visual Style
The banner is a full-width, overflow-hidden<div> with the following appearance:
| Property | Value | Effect |
|---|---|---|
| Background | bg-black | Black terminal background |
| Text colour | text-retro-lime | Bright green — classic CRT phosphor |
| Font | font-pixel | Pixel/bitmap typeface |
| Size | text-xs | Small, dense ticker text |
| Border | border-2 border-retro-lime | Green border matching the text colour |
| Padding | py-2 | Vertical breathing room |
inline-block driven by a Framer Motion motion.div. It animates along the x-axis from x: "100%" (off the right edge) to x: "-100%" (off the left edge) with ease: "linear" and repeat: Infinity, producing a continuous loop at the pace set by speed.