Path Text
Текст по кругу, дуге или волне: вращается со временем или прокруткой. Pro · 3D и моушн › 3D-кнопки, формы и текст
Установка
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';Пропсы
| 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. |
Похожие компоненты
- Button 3D — Объёмная кнопка-клавиша: утапливается при нажатии и отпружинивает
- Switch 3D — Переключатель-кубик: перекатывается между «выкл» и светящимся «вкл»
- Shape Morph — Форма перетекает в другую: круг, капля, звезда, цветок — на пружине
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
Назад: Shape Morph · Далее: Shader Aurora · Весь раздел «3D и моушн»