Text Path

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

textpathsvgcurveheadlineanimationtypographymarquee

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.