АнимацииProНовое
Орбиты
Иконки плавно кружат вокруг центра по одной или нескольким орбитам. Удобно для блока с интеграциями.
Настройки
color
accentColor
highlightColor
pathColor
Основано на Orbiting Circles (MIT лицензия) · Условия использования
Параметры
12 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Иконки или кружки, которые летают по орбите. |
| radius | number | 160 | Радиус орбиты в пикселях. |
| duration | number | 20 | Сколько секунд длится полный круг. |
| speed | number | 1 | Множитель скорости. 2 значит вдвое быстрее. |
| iconSize | number | 30 | Размер элемента на орбите в пикселях. |
| reverse | boolean | false | Крутить против часовой стрелки. |
| path | boolean | true | Показывать линию орбиты. |
| color | string | "#ffffff" | Основной цвет. Элементы внутри берут его через var(--orbit-c1). |
| accentColor | string | "#525252" | Второй цвет. Элементы внутри берут его через var(--orbit-c2). |
| highlightColor | string | "#e5e5e5" | Светлый цвет для бликов. Элементы внутри берут его через var(--orbit-c3). |
| pathColor | string | "rgba(255, 255, 255, 0.1)" | Цвет линии орбиты. |
| className | string | — | Классы для каждого элемента на орбите. |
Зависимости
Пакетов: 2
npm install clsx tailwind-merge