ComponentsScroll
Velocity marquee
A marquee that speeds up, slows and reverses with scroll.
Scroll up and down inside the preview ↓
Installation
$ npx shadcn@latest add @textlab/velocity-marqueeNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { VelocityMarquee } from "@/components/textlab/velocity-marquee/velocity-marquee";
<VelocityMarquee text="Available for new projects" />Variants
singledoubleoutlineProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "single" | "double" | "outline" | "single" | One row, two rows in opposite directions, or alternating solid and hollow copies. |
| speed | number | 6 | Resting speed in percent of one copy per second. |
| boost | number | 4 | How much scroll speed adds. |
| separator | string | "✦" | Mark between copies. |
| pauseOnHover | boolean | true | Pause while hovered or focused so it can be read. |
| container | RefObject<HTMLElement> | – | Scrollable ancestor. Defaults to the window. |
| as | ElementType | "div" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Bold bands between sections on marketing pages.
- Announcements and logos-as-text strips.
Skip it
- Essential information; moving text is hard to read.
- More than two marquees on one page.
Accessibility and motion
Accessibility
- Screen readers read the text once.
- Hover and focus pause it, meeting WCAG 2.2.2 for moving content.
Motion
- Direction follows the last scroll direction and stays there.
- Speed eases back to rest on a spring when scrolling stops.
Reduced motion. A single, still line.
Performance
- One transform per row, updated in a frame loop that pauses offscreen.