Curved Text Marquee React component
A marquee on a bendy line: text runs along a curve that sags at rest, and the pointer pulls the whole band up or down.
About the Curved Text Marquee component
Curved Text Marquee takes the marquee off the straight and narrow. The text runs along a line that sags gently at rest, and moving the pointer pulls the whole band up or down like a rope.
The text loops without a seam, and it is drawn at the real width of its container, so it stays the same size on any screen.
When to use it
Use it as a section divider on playful landing pages, portfolios and event sites.
For a calm ticker of logos or facts, a straight marquee reads better.
Installation
Add the Curved Text Marquee component to your project with the shadcn CLI. It lands in components/curved-text-marquee.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/curved-text-marqueeProps
<CurvedTextMarquee /> accepts 5 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "Bend the line" |
| speed Pixels per second. | number | 90 |
| bend How far the band sags at rest, in px. Negative arches it upward. | number | 70 |
| size Size of the text, in px. | number | 56 |
| height Height of the band, in px. | number | 300 |
- textstringDefault: "Bend the line"
- speed
Pixels per second.
numberDefault: 90 - bend
How far the band sags at rest, in px. Negative arches it upward.
numberDefault: 70 - size
Size of the text, in px.
numberDefault: 56 - height
Height of the band, in px.
numberDefault: 300
Curved Text Marquee FAQ
- Can it arch upward?
- Yes. Use a negative bend.
- How do I change the speed?
- speed is in pixels per second.
- Does it work on touch screens?
- The text keeps moving. The pull follows a mouse, so on touch the curve stays at rest.
- What about reduced motion?
- The text holds still on its curve.
