Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt

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

The Marquee component is a modern, animation-safe replacement for the old HTML <marquee> tag. It uses Framer Motion to animate a single text node from x: "100%" to x: "-100%" in an infinite loop, producing a smooth left-scrolling ticker. The component renders a clipping div with overflow-hidden around the animated text, so content never bleeds outside its container.

​
Import

import { M as Marquee } from '../components/Marquee.js';

​
Props

​
text
string
required
The text content to scroll across the banner. Wrap the string in *** separators or other ASCII decorations to achieve the classic ticker style — the text loops continuously so visible seams are expected.
​
speed
number
Duration in seconds for one full pass of the text across the container. Higher values produce slower scrolling; lower values produce faster scrolling. This maps directly to Framer Motion’s transition.duration. Defaults to 20 (the component source default).
The home page marquee uses speed={15} for a brisk welcome banner. The Winamp track-title ticker uses speed={8} for a faster DJ-style scroll. Tune this value relative to the length of your text string — longer strings benefit from a higher speed value to keep the scroll pace feeling consistent.
​
className
string
Extra Tailwind utility classes merged into the outer container div — the same element that carries the fixed overflow-hidden whitespace-nowrap flex items-center classes. Use this to control the font family, size, colour, width, and letter-spacing of the scrolling text. Because className targets the wrapper rather than the inner animated element, width constraints (e.g. w-32) and flex alignment are also set here.

​
Usage

​
Home page welcome banner

The full-width welcome banner at the top of the home page uses a bright retro-yellow VT323 typeface on a black background. 
import { M as Marquee } from '../components/Marquee.js';

<div className="w-full bg-black border-4 border-win-gray shadow-win-out p-1">
  <Marquee
    text="*** WELCOME TO MY HOMEPAGE *** Now with 100% more semicolons! *** Best viewed in Netscape Navigator *** Last updated: literally just now ***"
    speed={15}
    className="text-retro-yellow font-vt323 text-xl tracking-widest"
  />
</div>

​
Winamp track-title ticker

The About page’s fake Winamp player embeds a faster, narrower marquee to simulate a scrolling song title in the player’s now-playing display. 
import { M as Marquee } from '../components/Marquee.js';

<div className="bg-black border border-gray-700 p-2 mb-2 flex items-center justify-between">
  <span className="animate-pulse text-retro-turquoise">01:42</span>
  <Marquee
    text="Daft Punk - Harder, Better, Faster, Stronger *** "
    speed={8}
    className="w-32 text-retro-yellow"
  />
</div>

​
Full TV-ticker wrapper

Wrap the component in the following container classes for the authentic bordered-TV-ticker look seen on the home page: 
<div className="bg-black border-4 border-win-gray shadow-win-out p-1">
  <Marquee
    text="YOUR SCROLLING MESSAGE HERE ***"
    speed={15}
    className="text-retro-yellow font-vt323 text-xl tracking-widest"
  />
</div>
Combine font-vt323 with text-retro-yellow and tracking-widest for the most authentic retro terminal look. The font-vt323 family is a pixel-perfect replica of the VT323 terminal typeface registered in the project’s Tailwind config. For a more aggressive neon look, swap text-retro-yellow for text-retro-pink or text-retro-teal.

Build docs developers (and LLMs) love

Get started for freeTalk to us