Velocity Marquee Text React component
Oversized marquee rows that answer to your scrolling: they speed up and lean into it, then ease back to a steady drift.
About the Velocity Marquee Text component
Velocity Marquee Text makes a marquee feel connected to the page. The rows drift steadily at rest, then speed up and lean into it as you scroll, before easing back.
Rows run in opposite directions and loop without a seam, so one short phrase can fill a whole section.
When to use it
Use it as a big section break on scrolling landing pages, portfolios and event sites.
For logos or a slow ticker, a plain marquee is a calmer choice.
Installation
Add the Velocity Marquee Text component to your project with the shadcn CLI. It lands in components/velocity-marquee-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/velocity-marquee-textProps
<VelocityMarqueeText /> accepts 4 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| rows One entry per row. Rows alternate direction. | string[] | ROWS |
| speed Pixels per second at rest. | number | 70 |
| boost How much scrolling and dragging speed it up. | number | 1 |
| lean Most it can lean, in degrees. | number | 12 |
- rows
One entry per row. Rows alternate direction.
string[]Default: ROWS - speed
Pixels per second at rest.
numberDefault: 70 - boost
How much scrolling and dragging speed it up.
numberDefault: 1 - lean
Most it can lean, in degrees.
numberDefault: 12
Velocity Marquee Text FAQ
- What makes it speed up?
- Scrolling the page or using the wheel over it. boost sets how strongly it reacts.
- How do I change the lean?
- lean sets the most it can tilt, in degrees. Set it to 0 to keep the letters upright.
- Can I add more rows?
- Yes. Each entry in rows is a row, and they alternate direction.
- What about reduced motion?
- The rows hold still.
