Text Path

SVG text riding a curved wave, arc, or circle path on a seamless, light loop.

textpathsvgcurveheadlineanimationtypographymarquee

Overview

Text Path is a React and Tailwind CSS curved text component that runs a phrase along an SVG wave, arc, or circle as a seamless loop, in Next.js or any React app, with no dependencies. Circle mode measures the string and sizes the ring to fit, so spacing stays even with proportional fonts, while wave and arc scroll like a curved marquee. Pass any path to follow your own shape, and set speed, direction, separator, and font. It pauses off screen, stops for reduced motion, and announces the text once. Custom paths need a matching viewBox.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-path

Usage

Import TextPath from @/components/wensity/text-path and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextPath } from "@/components/wensity/text-path";
 2
 3export default function Example() {
 4  return (
 5    <TextPath
 6      text="I think wensity has the best components"
 7      curve="arc"
 8      duration={14}
 9      letterSpacing={0.05}
10      className="font-display max-w-3xl text-zinc-900 dark:text-zinc-100"
11    />
12  );
13}

Props

Prop	Type	Default	Description
`text`	string	-	The string to tile along the path.
`curve`	"wave" \| "arc" \| "circle"	"arc"	Built-in curve. Circle sizes the ring to the text; wave/arc use open path marquees. Ignored when path is set.
`path`	string	-	Custom SVG path d. Wins over curve (open path marquee).
`viewBox`	string	-	Custom SVG viewBox when using a custom path.
`duration`	number	14	Seconds for one seamless loop. Lower = faster.
`direction`	"forward" \| "reverse"	"forward"	Travel / spin direction.
`separator`	string	" · "	Separator between tiled copies.
`repeats`	number	3	Tiles the string. Wave/arc: along the path. Circle: copies around the ring (radius grows to fit — no stacking).
`fontSize`	number	28	Font size in CSS pixels.
`fontWeight`	number \| string	500	Font weight for the path text.
`letterSpacing`	number	0.05	Letter spacing in em.
`fill`	string	currentColor	Text fill. Omit to inherit currentColor.
`showPath`	boolean	false	Draw the underlying path stroke.
`pathColor`	string	theme	Path stroke color. Omit for soft theme line.
`pathWidth`	number	1	Path stroke width in CSS pixels.
`paused`	boolean	-	Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden.

Featured in React hero section components.