Velocity Band
A typographic marquee whose drift speed and skew react to scroll velocity — rows alternate direction and lean into hard scrolls.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/velocity-band.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/velocity-band.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | string[][] | — | One array of words per marquee row. Rows alternate direction. |
| baseSpeed | number | 54 | Base drift speed in px/s when the page is still. |
| velocityBoost | number | 200 | How much scroll velocity boosts the drift. 0 disables the reaction. |
| maxSkew | number | 6 | Maximum skew angle in degrees at high scroll velocity. |
| serifAlternate | boolean | true | Alternate serif-italic and sans words. False for all-sans. |
| className | string | — | Additional CSS classes for the wrapper. |