Path Text
Text along a circle, arc or wave, rotating over time or with scroll. Pro · 3D and motion › 3D buttons, shapes and text
Text set along a curve — a rotating round badge, a word arching over a heading, a ribbon waving across a section — moving with the clock or with the scroll. A circle turns as a whole on the compositor (with the scroll: a scroll-driven animation); on an arc or a wave the text slides along the path — an SVG animation of its start offset by the clock, an attribute written per scrolled frame with the scroll. The text is real SVG text in the theme's font, said once to assistive technology (the repeats are hidden). Movement stops off screen, in a hidden tab, on hover and focus within, and with reduced motion.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add path-textnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { PathText } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
text * | string | The text that runs along the path. On a circle and a moving path it repeats to fill the path. | |
shape | 'circle' | 'arc' | 'wave' | 'circle' | circle — a round badge or stamp; arc — a curve over a heading; wave — a ribbon. |
width | number | 220 | Width of the scene, px; a circle is as tall as it is wide. |
height | number | 120 | Height of an arc or a wave, px. |
speed | number | 24 | Speed along the path, px per second; 0 — still, negative — backwards. |
scroll | boolean | false | Ties the position on the path to the scroll instead of the clock. |
paused | boolean | false | Holds the movement, e.g. from a pause button of the page (WCAG 2.2.2). |
fontSize | number | 15 | Font size, px. |
separator | string | ' • ' | Put between the repeats. |
children | ReactNode | Content in the middle of a circle: a logo, an icon, a button. |
Related components
- Button 3D — Chunky key-style button that presses in and springs back
- Switch 3D — Cube switch that rolls between “off” and a glowing “on”
- Shape Morph — Shapes morph into each other on a spring: circle, drop, star, flower
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Shape Morph · Next: Shader Aurora · All 3D and motion