💾
Retro90s UIv1.0.0

Marquee

Classic scrolling text effect, just like the HTML marquee tag from the 90s.

Preview

Welcome to my awesome website! Please sign my guestbook!
Hot news! New components added every week!
Rainbow text scrolling by!

Installation

npx shadcn@latest add https://retro90s.dev/r/marquee.json

Usage

import { Marquee } from "@/components/ui/marquee"

export function MyComponent() {
  return (
    <Marquee variant="neon" speed={15}>
      Welcome to my site!
    </Marquee>
  )
}

Variants

Default

Default green terminal style text
variant="default"

Neon

Glowing neon purple style
variant="neon"

Matrix

Matrix-inspired monospace font
variant="matrix"

Rainbow

Rainbow gradient text effect!
variant="rainbow"

Sizes

Small size marquee text
size="sm"
Default size marquee text
size="default"
Large size marquee text
size="lg"

Direction

Scrolling left (default)
direction="left"
Scrolling right
direction="right"

Speed Control

Slow scrolling (speed=30)
Fast scrolling (speed=10)
Very fast! (speed=5)

Lower number = faster scrolling

Props

PropTypeDefault
variant"default" | "neon" | "matrix" | "rainbow""default"
size"sm" | "default" | "lg""default"
speednumber20
direction"left" | "right""left"
pauseOnHoverbooleantrue
gapstring"2rem"