Big text that scrolls on its own, speeds up as the page scrolls, turns with the scroll direction and leans into the speed.
Customize
Usage
import { VelocityMarquee } from "@/components/motionkit/velocity-marquee";
<section className="space-y-2 py-24 text-8xl font-semibold">
<VelocityMarquee text="Design that moves" />
<VelocityMarquee text="Design that moves" speed={-2} />
</section>Motion
The exact curves this component runs, plotted with Motion's own maths.
Scroll
Runs on its own; page scroll speeds it up
Speed and lean
Page scroll velocity
Agency, portfolio and launch pages: a bold statement or list of services between sections, especially two rows running opposite ways.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/velocity-marquee. It saves the file to components/motionkit and installs its dependencies.
Velocity Marquee is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
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.
Morphing Text
Rotates through a list of words, letters rising in and drifting out.
Kinetic Text
Headlines that rise letter by letter, slide up line by line, blur into focus or light up as you scroll.
Kinetic Headline
Headlines that arrive word by word or letter by letter: slide, blur, hinge or rise from behind a mask, from any direction.
Customize
Usage
import { VelocityMarquee } from "@/components/motionkit/velocity-marquee";
<section className="space-y-2 py-24 text-8xl font-semibold">
<VelocityMarquee text="Design that moves" />
<VelocityMarquee text="Design that moves" speed={-2} />
</section>Motion
The exact curves this component runs, plotted with Motion's own maths.
Scroll
Runs on its own; page scroll speeds it up
Speed and lean
Page scroll velocity
The live preview is free to explore. Plus unlocks the source for Velocity Marquee and every other premium component.