Velocity Marquee
Pro
Rows of big text that scroll sideways and speed up, flip and skew with the scroll velocity.
Mekai Games. Made to be played
Scroll inside this box, fast then slow, down then up
Customize
60px/s
8°
Pause on hover
Installation
Velocity Marquee is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy velocity-marquee.tsx into components/ui and run npm install motion.
Usage
import { VelocityMarquee } from "@/components/ui/velocity-marquee";
<VelocityMarquee
rows={["Mekai Games", "Made to be played"]}
baseVelocity={60}
className="text-7xl font-black uppercase"
/>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| rows | string[] | — | One line of text per row. Rows alternate direction. |
| baseVelocity | number | 60 | Pixels per second when the page is not scrolling. |
| skew | number | 8 | Maximum skew in degrees while scrolling fast. 0 turns it off. |
| separator | string | "✦" | Shown between repetitions of the text. |
| accentColor | string | "#ff784f" | Color of the separator. |
| pauseOnHover | boolean | false | Stop the rows while the pointer is over them. |
| scrollContainerRef | RefObject<HTMLElement | null> | — | The element that scrolls, when it is not the window. |
| className | string | — | Extra classes for the wrapper, such as font size. |
Dependencies: motion