A seamless text marquee that flows along curved SVG paths.
Every prop is wired to the controls underneath. Hover the ribbon to pause it.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "React ✦ Bits" | The phrase repeated along the curve. |
shape | "wave" | "circle" | "infinity" | "arch" | "line" | "wave" | Built-in curve the text flows along. |
path | string | undefined | Custom SVG path data, drawn in a 1200x400 viewBox. Overrides shape when provided. |
speed | number | 90 | Travel speed along the path, in units per second. |
direction | "forward" | "reverse" | "forward" | Direction the text scrolls around the curve. |
separator | string | "✦" | Glyph placed between each repetition. |
curviness | number | 90 | Amplitude of the wave, or the radius of the closed shapes. |
fontSize | number | 46 | Font size of the looping text. |
fontWeight | number | 800 | Font weight of the looping text. |
letterSpacing | number | 2 | Extra tracking between letters. |
uppercase | boolean | true | Renders the phrase in uppercase. |
color | string | "#ffffff" | Fill color of the text. |
ribbon | boolean | true | Draws a solid band behind the text along the path. |
ribbonColor | string | "#5227FF" | Color of the band behind the text. |
ribbonWidth | number | 86 | Thickness of the band behind the text. |
pauseOnHover | boolean | true | Pauses the loop while the pointer is over it. |
Keyboard shortcuts and ARIA behavior.