Skip to main content

Documentation Index

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

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

MarqueeTicker is a pure CSS scrolling text banner that continuously animates a line of text from the right edge of the screen to the left, looping infinitely. It evokes the classic <marquee> HTML element — but implemented with a Tailwind animate-marquee CSS animation instead, giving you full control over timing and style. The component is perfect for scrolling announcements, page taglines, or easter-egg messages at the top or bottom of a page.

​
Props

​
text
string
required
The string to scroll across the banner. The value is rendered as a single whitespace-nowrap line, so no matter how long the string is it will never wrap onto a second line. Use Unicode characters such as ★, ▶, or ✦ as visual separators between phrases.

​
Usage

​
Basic announcement

import { MarqueeTicker } from "@/components/MarqueeTicker";

function PageHeader() {
  return (
    <MarqueeTicker text="WELCOME TO THE ARCADE ★ NOW LOADING... ★ PRESS START" />
  );
}

​
Dynamic text from state or props

function StatusBanner({ message }) {
  return <MarqueeTicker text={message} />;
}

​
How it works

The outer <div> sets overflow-hidden and w-full so the text is clipped at the container boundaries. The inner <div> carries the animate-marquee class which applies a CSS animation defined in tailwind.config.js (or a global CSS file): 
@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
CSS propertyValue
Animation namemarquee
Duration25s
Timing functionlinear
Iteration countinfinite
Starting positiontranslateX(100%)
Ending positiontranslateX(-100%)
The linear timing function ensures perfectly constant scroll speed regardless of text length.

​
Styling notes

Token / ClassEffect
font-vt323Pixel-style VT323 monospace typeface
text-xlFont size 1.25rem
text-y2k-limeBright lime green text (#adff2f)
bg-y2k-panelDark panel background color
border-y-22px top and bottom borders only
border-y2k-magentaHot magenta border color (#ff4ad8)
py-1Vertical padding to give the text breathing room
The animate-marquee class must be registered in your Tailwind config’s theme.extend.animation and theme.extend.keyframes blocks, or in a global CSS file. It is not a built-in Tailwind utility.

​
Tips

Use Unicode block characters as separators to break up long announcement strings:
<MarqueeTicker text="NEW PROJECT DROPPED ★ CHECK THE PROJECTS PAGE ▶ COMING SOON: BLOG RELAUNCH ✦" />
For a faster or slower scroll, override the animation duration by adding a custom utility or inline style to the inner animate-marquee element. Alternatively, define a second variant (e.g. animate-marquee-fast) in your Tailwind config targeting the same keyframes with a shorter duration.
Very short strings (a few words) may leave a visible gap between the end of the text and the next loop iteration. Pad short strings with extra spaces or repeated phrases to ensure seamless looping.

Build docs developers (and LLMs) love

Get started for freeTalk to us