ComponentsPath
Path text
Text travels along a wave, circle or spiral.
Installation
$ npx shadcn@latest add @textlab/path-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { PathText } from "@/components/textlab/path-text/path-text";
<PathText text="Open daily" variant="circle" className="w-48" />Variants
wavecirclespiralProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "wave" | "circle" | "spiral" | "wave" | Flow along a sine, turn as a badge, or wind inward. |
| speed | number | 60 | Path units per second. Negative reverses. |
| separator | string | "·" | Mark between repeats. |
| fontSize | number | – | Size in path units. Defaults per variant. |
| as | ElementType | "div" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Badges, stamps and seals.
- Decorative bands between sections.
Skip it
- Essential copy; curved text is slower to read.
- Long sentences on the spiral.
Accessibility and motion
Accessibility
- The SVG is decorative; the text is read once from a hidden copy.
Motion
- The loop wraps at a measured seam, so it never visibly jumps.
- The circle badge turns once every 15 seconds at the default speed.
Reduced motion. Text sits still on its path.
Performance
- Wave and spiral update one attribute per frame; circle is a CSS rotation.