Text Path
0
Used by 0Controls
Text Path
Scroll repeating text seamlessly along a procedural sine-wave path with adjustable frequency, height, speed, and direction.
KEY FEATURES
- — Text scrolls seamlessly along an SVG sine-wave path
- — Wave frequency control sets full cycles across the width
- — Wave height sets true peak-to-trough height in pixels
- — Adjustable scroll speed from fully stopped to fast
- — Reversible scroll direction toggle
- — Custom separator string inserted between text repeats
- — Gap padding around the separator at every junction
- — Extended font control for family, weight, size, and letter spacing
- — Text color picker
- — Responsive wave geometry that reflows via ResizeObserver
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
text
string
TEXT PATH
Text string that repeats and scrolls along the wave path.
separator
string
•
Divider inserted between each repeat of the text.
gap
number
0
Extra spacing padded on both sides of the separator.
textFont
font
{"..."}
Font family, weight, size, line height, and letter spacing of the text.
textColor
color
#FFFFFF
Fill color of the scrolling text.
reversed
boolean
true
Flips the scroll direction of the text along the wave.
waveFrequency
number
3
Number of full sine-wave cycles across the visible width.
waveHeight
number
100
Peak-to-trough height of the wave in pixels; higher is taller.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
30
Scroll speed along the path; 0 stops it, higher is faster.
