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.jsonUsage
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
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "neon" | "matrix" | "rainbow" | "default" |
| size | "sm" | "default" | "lg" | "default" |
| speed | number | 20 |
| direction | "left" | "right" | "left" |
| pauseOnHover | boolean | true |
| gap | string | "2rem" |