# Velocity Marquee

> Big text that scrolls on its own, speeds up as the page scrolls, turns with the scroll direction and leans into the speed.

Category: Text · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/velocity-marquee

## When to use it

Agency, portfolio and launch pages: a bold statement or list of services between sections, especially two rows running opposite ways.

## How it works

The track holds four copies of the text and moves by a percentage that wraps every quarter, which is exactly one copy, so the loop never shows a seam. A frame clock moves it at its resting speed; useVelocity reads how fast the page is scrolling, and a spring smooths that into extra speed and a skew, so fast scrolling makes the text rush and lean. Scrolling up turns it round, scrolling down turns it back.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/velocity-marquee` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The line of text, repeated across the track. |
| `speed` | `number` | `2` | Copies per ten seconds at rest. Negative runs the other way. |
| `boost` | `number` | `4` | How much page scrolling speeds it up. 0 turns it off. |
| `skew` | `boolean` | `true` | Lean the letters when scrolling fast. |
| `separator` | `string` | `"·"` | Placed between copies. |

## Accessibility

- **Keyboard: Not applicable.** Decorative text, nothing to focus.
- **Screen readers: Pass.** The text is read once from a visually hidden copy; the moving copies are hidden.
- **Reduced motion: Partial.** With reduced motion on, it holds still and never leans. Otherwise it moves continuously, so beside other content WCAG 2.2.2 asks for a way to pause it.
- **Colour contrast: Not applicable.** Inherits your text colour; check it against the section behind.