# Curved Marquee

> Text flowing endlessly along a gentle wave, without a seam, that speeds up with page scrolling and turns round when you scroll back.

Category: Text · MotionKit Plus · Updated 2026-10-26 · Live demo: https://www.motionkitui.com/components/curved-marquee

## When to use it

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.

## How it works

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.

## Installation

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

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** Decorative text, nothing to focus.
- **Screen readers: Pass.** Read once from a visually hidden copy; the repeating SVG text is hidden.
- **Reduced motion: Partial.** 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).
- **Colour contrast: Pass.** Ivory text measures 17:1 on the page background.