Marquee
An infinite scrolling marquee with configurable speed, direction, fade edges, and pause on hover.
Import
import { Marquee, Card, CardContent } from "@igorao79/uivix";Playground
React
Technology
Next.js
Technology
TypeScript
Technology
Tailwind
Technology
Framer Motion
Technology
Radix UI
Technology
React
Technology
Next.js
Technology
TypeScript
Technology
Tailwind
Technology
Framer Motion
Technology
Radix UI
Technology
React
Technology
Next.js
Technology
TypeScript
Technology
Tailwind
Technology
Framer Motion
Technology
Radix UI
Technology
React
Technology
Next.js
Technology
TypeScript
Technology
Tailwind
Technology
Framer Motion
Technology
Radix UI
Technology
30s
Usage
<Marquee speed={30} direction="left" pauseOnHover fade>
<Card className="mx-2 w-[160px]">
<CardContent className="p-4">
<p className="text-sm font-medium">Item 1</p>
</CardContent>
</Card>
<Card className="mx-2 w-[160px]">
<CardContent className="p-4">
<p className="text-sm font-medium">Item 2</p>
</CardContent>
</Card>
</Marquee>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 30 | Duration in seconds for one full scroll cycle |
| direction | "left" | "right" | "up" | "down" | "left" | Scroll direction |
| pauseOnHover | boolean | true | Pause the animation when hovered |
| fade | boolean | true | Fade out edges with a gradient mask |
| repeat | number | 4 | Number of content copies for seamless looping |
| className | string | - | Additional CSS classes |