Text Along Path

Render animated text that loops or tracks scroll progress along any SVG path.

motion-sv

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/text-along-path.json

Visit Original Docs

For more deeper understaing visit fancy components documentation.

Docs

Examples

Auto Animation

Animation on closed path

Scroll-driven animation

SCROLL DOWN

Props

Prop	Type	Default	Description
`path`	`string`	`required`	SVG path data string used as the motion track for the text.
`text`	`string`	`required`	Text content rendered along the path.
`pathId`	`string`	`auto-generated`	Optional id used to link the `<path>` and `<textPath>` nodes.
`pathClass`	`string`	`undefined`	Classes applied to the underlying SVG path element.
`preserveAspectRatio`	`PreserveAspectRatio`	`"xMidYMid meet"`	SVG preserveAspectRatio value forwarded to the root element.
`showPath`	`boolean`	`false`	Displays the underlying guide path using the current text color.
`width`	`string \| number`	`"100%"`	Width forwarded to the root SVG element.
`height`	`string \| number`	`"100%"`	Height forwarded to the root SVG element.
`viewBox`	`string`	`"0 0 100 100"`	SVG viewBox used to size and scale the path scene.
`svgClass`	`string`	`undefined`	Classes applied to the root SVG element.
`textClass`	`string`	`undefined`	Classes applied to each `<textPath>` instance.
`textAnchor`	`"start" \| "middle" \| "end"`	`"start"`	Anchor alignment used for the rendered SVG text.
`animationType`	`"auto" \| "scroll"`	`"auto"`	Uses SVG `<animate>` loops in `auto` mode or maps scroll progress to `startOffset` in `scroll` mode.
`duration`	`number`	`4`	Duration in seconds for the automatic looping animation.
`repeatCount`	`number \| "indefinite"`	`"indefinite"`	Repeat count forwarded to the SVG animate elements in auto mode.
`easingFunction`	`{ calcMode?: string; keyTimes?: string; keySplines?: string }`	`{}`	Optional SVG animation timing settings forwarded to both auto animation tracks.
`scrollContainer`	`HTMLElement \| null`	`undefined`	Optional scroll container observed when `animationType` is `scroll`.
`scrollOffset`	`UseScrollOptions["offset"]`	`["start end", "end end"]`	Offset pair used by `motion-sv` when tracking scroll progress.
`scrollTransformValues`	`[number, number]`	`[0, 100]`	Maps scroll progress to the text path start offset percentage range.