Text On Path
Text flowing seamlessly along a wave, arc, circle or custom SVG path, pausing on hover.
Preview
Fresh notes every Friday Pebble notes
Open for projects 2026 Lisbon
Arc, running backward
Hover to pause
26Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text along the path; repeats to fill it. End with a separator. |
| shape / path | "wave" | "arc" | "circle" / { d, viewBox } | "wave" | Preset curve, or your own path and viewBox. |
| speed | number | 40 | viewBox units per second along the path. |
| direction | "forward" | "backward" | "forward" | Flow direction. |
| pauseOnHover / showPath | boolean | true / false | Ease to a stop on hover; draw the path as a faint guide. |
| textClassName | string | — | Classes for the text (size in viewBox units, fill, tracking). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.