Circular Text
Текст на вращающемся кольце, в центре — что угодно. Наведение или касание ускоряет, замедляет, останавливает или разворачивает вращение — с инерцией, без рывков.
зависимости 0файлы tsx + css + tsпараметры 8react 18+
↗
X 0000 Y 0000↳ Наведите на кольцо или коснитесь его
Пульт08 параметров
01text
Текст по кругу.
02size
px
Диаметр кольца.
03fontSize
px
Размер букв.
04speed
s
Секунд на оборот.
05direction
Направление вращения.
06onHover
Что делает наведение.
07easing
Как быстро меняется вращение при наведении.
08color
Цвет текста.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "принимаю проекты ✦ принимаю проекты ✦ " | Текст по кругу. |
size | number | 200 | Диаметр кольца. |
fontSize | number | 15 | Размер букв. |
speed | number | 14 | Секунд на оборот. |
direction | 'clockwise' | 'counter' | "clockwise" | Направление вращения. |
onHover | 'speedUp' | 'slowDown' | 'pause' | 'reverse' | 'none' | "speedUp" | Что делает наведение. |
easing | number | 0.08 | Как быстро меняется вращение при наведении. |
color | string | "#edeae3" | Цвет текста. |
children | ReactNode | — | Показывается в центре кольца. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |