АнимацииНовое
Парящий блок
Плавно покачивает любой блок в трёх измерениях, как будто он висит в воздухе. Оживляет обложки, карточки и иконки.
Настройки
color
accentColor
highlightColor
Основано на Float (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Что будет парить. |
| speed | number | 0.5 | Скорость покачивания. |
| amplitude | [number, number, number] | "[10, 30, 30]" | Размах движения по осям X, Y и Z, в пикселях. |
| rotationRange | [number, number, number] | "[15, 15, 7.5]" | Размах наклона по осям X, Y и Z, в градусах. |
| timeOffset | number | 0 | Сдвиг фазы. Разные значения не дают нескольким блокам двигаться синхронно. |
| color | string | "#ffffff" | Основной цвет. Элементы внутри берут его через var(--float-c1). |
| accentColor | string | "#a3a3a3" | Второй цвет. Элементы внутри берут его через var(--float-c2). |
| highlightColor | string | "#e5e5e5" | Светлый цвет для бликов. Элементы внутри берут его через var(--float-c3). |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge