Skip to main content

Documentation Index

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

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

Marquee renders a horizontal, infinitely looping text ticker — the kind you would have seen at the bottom of a Windows 98 media player or across the top of a retro website. On the Dark Retro Webpage it appears as a decorative accent band, typically displaying status messages, skill lists, or thematic strings like "AVAILABLE FOR WORK ✦ OPEN SOURCE ✦ DARK MODE ONLY". Under the hood it leverages Framer Motion’s motion.div to produce a smooth, GPU-accelerated CSS transform animation with zero JavaScript timer overhead.

​
Props

​
text
string
required
The message string that is repeated across the ticker. Four copies are rendered side by side so that the seamless loop is never interrupted — when the animation snaps back to its start position, the user cannot tell.
​
speed
number
default:20
The Framer Motion duration (in seconds) for one full animation cycle. Lower values scroll faster; higher values scroll slower. At the default of 20 the ticker takes 20 seconds to travel half its total width, giving a gentle ambient scroll. Drop it to 8–10 for an urgent ticker effect.
​
className
string
default:"\"\""
Extra classes applied to the outer overflow-hidden container. Use this to control height, text size, text colour, background, padding, or borders.

​
Usage

import Marquee from "./components/Marquee";

export default function SkillsBanner() {
  return (
    <Marquee
      text="REACT ✦ TYPESCRIPT ✦ TAILWIND ✦ FRAMER MOTION ✦ NODE.JS ✦"
      speed={15}
      className="text-[#a855f7] font-mono text-sm py-2 border-y border-[#a855f7]"
    />
  );
}

​
How the Infinite Scroll Works

The seamless loop is achieved through a combination of DOM duplication and a half-width transform:
1

Four copies are rendered

Four <span> elements, each containing text, are placed inside a single motion.div with className="flex gap-4 min-w-full". This ensures the total content is always at least twice the viewport width regardless of how short text is.
2

The motion.div animates from 0% to -50%

Framer Motion animates the x property from "0%" to "-50%". Because four copies fill 200% of the container width, scrolling by -50% lands the ticker at exactly the position where the same sequence starts again.
3

repeat: Infinity with linear easing

The transition is configured with repeat: Infinity and ease: "linear" so there is no acceleration, deceleration, or gap at the loop point — the scroll appears perfectly continuous.
The full animation config from the source: 
<div className={`overflow-hidden whitespace-nowrap flex ${className}`}>
  <motion.div
    className="flex gap-4 min-w-full"
    animate={{ x: ["0%", "-50%"] }}
    transition={{ repeat: Infinity, ease: "linear", duration: speed }}
  >
    <span className="pr-4">{text}</span>
    <span className="pr-4">{text}</span>
    <span className="pr-4">{text}</span>
    <span className="pr-4">{text}</span>
  </motion.div>
</div>
The speed prop maps directly to Framer Motion’s duration — it is the number of seconds for one full pass, not pixels per second. A value of 20 (the default) produces a leisurely ambient scroll; values between 6 and 12 work well for a more energetic ticker. Avoid going below 4 — at very high speeds the text becomes unreadable and the animation can feel jarring.

​
Speed Examples

{/* Slow ambient scroll — good for decorative background bands */}
<Marquee text="LOADING... ✦ PLEASE WAIT ✦" speed={30} />

{/* Default — balanced readability and motion */}
<Marquee text="AVAILABLE FOR HIRE ✦ OPEN TO REMOTE ✦" speed={20} />

{/* Fast ticker — good for alerts or status displays */}
<Marquee text="NEW POST ✦ CHECK THE BLOG ✦" speed={8} />

{/* Urgent — use sparingly */}
<Marquee text="CRITICAL ERROR ✦ KERNEL PANIC ✦" speed={5} />

​
Related

Win98Window

The bevel-framed window container that Marquee is often placed above or below as an accent strip.

Layout Utilities

CSS tokens and the .blink animation you can combine with Marquee text for extra retro flair.

Typography

Font families — use .font-display (Press Start 2P) on the Marquee container for maximum retro impact.

Build docs developers (and LLMs) love

Get started for freeTalk to us