Text flowing endlessly along a gentle wave, without a seam, that speeds up with page scrolling and turns round when you scroll back.
Customize
Usage
import { CurvedMarquee } from "@/components/motionkit/curved-marquee";
<CurvedMarquee text="Design ✦ Motion ✦ Code ✦ Ship ✦ " className="font-semibold" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own; page scroll speeds it up
Agency and portfolio sites, event pages and product launches: a band of services, values or a slogan between sections, with more character than a straight marquee.
The text sits on an SVG textPath that follows a smooth wave running past both edges. An invisible copy of one repetition is measured with getComputedTextLength, and every frame the path's startOffset moves back by the speed, wrapping after exactly one copy, so the loop never shows a seam. useVelocity reads how fast the page is scrolling: fast scrolling multiplies the speed, and scrolling up turns the flow round until you scroll down again.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text along the curve. |
| speed | number | 60 | Pixels a second at rest; negative reverses it. |
| curve | number | 0.5 | Depth of the wave, 0 for straight. |
| scrollBoost | boolean | true | Speed up and turn round with page scrolling. |
| color | string | "#F6F1E8" | Text colour. |
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/curved-marquee. It saves the file to components/motionkit and installs its dependencies.
Curved Marquee is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 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. Otherwise it moves for as long as it's on screen, so give it a pause control if it sits beside reading content (WCAG 2.2.2).
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.
Kinetic Text
Headlines that rise letter by letter, slide up line by line, blur into focus or light up as you scroll.
Underline Draw
A hand-drawn scribble, swoosh, double line, circle or strike-through traces itself around your words.
Customize
Usage
import { CurvedMarquee } from "@/components/motionkit/curved-marquee";
<CurvedMarquee text="Design ✦ Motion ✦ Code ✦ Ship ✦ " className="font-semibold" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own; page scroll speeds it up
The live preview is free to explore. Plus unlocks the source for Curved Marquee and every other premium component.