КарточкиНовое
Луч по рамке
Светящийся луч бежит по краю карточки. Положите его внутрь любого блока со скруглёнными углами, и рамка оживёт.
Настройки
colorFrom
colorTo
Основано на Border Beam (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
10 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| size | number | 50 | Длина светящегося луча, в пикселях. |
| duration | number | 6 | Время одного круга, в секундах. |
| delay | number | 0 | Сдвиг старта, в секундах. |
| colorFrom | string | "#ffffff" | Цвет головы луча. |
| colorTo | string | "rgba(255,255,255,0.15)" | Цвет хвоста луча. |
| borderWidth | number | 1 | Толщина рамки, в пикселях. |
| reverse | boolean | false | Луч бежит в обратную сторону. |
| initialOffset | number | 0 | С какого места рамки стартует луч, в процентах. |
| transition | Transition | — | Свои настройки анимации Motion. |
| className | string | — | Классы для самого луча. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge