Text on Path React component
Words that flow along a wave, an arc or a circle, looping without a seam and scaling with their container.
About the Text on Path component
Text on Path sets a sentence along a curve and keeps it moving. Pick a wave, an arc or a full circle, and the text loops along it with no visible join.
The whole thing is SVG, so it stays sharp and scales with its container.
When to use it
Use it as a playful divider, a badge around a logo or a moving caption on a landing page.
Keep the sentence short. Curved type is slower to read than a straight line.
Installation
Add the Text on Path component to your project with the shadcn CLI. It lands in components/text-on-path.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/text-on-pathProps
<TextOnPath /> accepts 4 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 | "Set your words on any line you like" |
| shape | "wave" | "arc" | "circle" | "wave" |
| seconds Seconds for one full trip. 0 holds the text still. | number | 8 |
| size Size of the text on an 800-wide canvas. | number | 42 |
- textstringDefault: "Set your words on any line you like"
- shape"wave" | "arc" | "circle"Default: "wave"
- seconds
Seconds for one full trip. 0 holds the text still.
numberDefault: 8 - size
Size of the text on an 800-wide canvas.
numberDefault: 42
Text on Path FAQ
- How do I stop the movement?
- Set seconds to 0 and the text holds still.
- How big is the text?
- size is measured against an 800-wide canvas, so the text scales with the component.
- Can I use my own path?
- Yes. Add your path to the PATHS list at the top of the file.
- What about reduced motion?
- The text stays still on its path.
