АнимацииProНовое
Анимированный луч
Световой импульс бежит по линии между двумя элементами. Хорошо показывает интеграции и поток данных.
Настройки
pathColor
gradientStartColor
gradientStopColor
Основано на Animated Beam (MIT лицензия) · Условия использования
Параметры
19 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| containerRef | RefObject<HTMLElement | null> | — | Ссылка на общий контейнер. Луч рисуется внутри него. |
| fromRef | RefObject<HTMLElement | null> | — | Ссылка на элемент, откуда идёт луч. |
| toRef | RefObject<HTMLElement | null> | — | Ссылка на элемент, куда приходит луч. |
| curvature | number | 0 | Изгиб линии в пикселях. Минус выгибает вверх. |
| duration | number | 5 | Сколько секунд идёт один проход света. |
| delay | number | 0 | Пауза перед стартом, в секундах. |
| reverse | boolean | false | Пустить свет в обратную сторону. |
| pathColor | string | "#ffffff" | Цвет неподвижной линии. |
| pathWidth | number | 2 | Толщина линии в пикселях. |
| pathOpacity | number | 0.2 | Прозрачность неподвижной линии. |
| gradientStartColor | string | "#ffffff" | Цвет головы бегущего света. |
| gradientStopColor | string | "#a1a1aa" | Цвет хвоста бегущего света. |
| repeat | number | "Infinity" | Сколько раз повторить. По умолчанию бесконечно. |
| repeatDelay | number | 0 | Пауза между повторами, в секундах. |
| startXOffset | number | 0 | Сдвиг начала по горизонтали, в пикселях. |
| startYOffset | number | 0 | Сдвиг начала по вертикали, в пикселях. |
| endXOffset | number | 0 | Сдвиг конца по горизонтали, в пикселях. |
| endYOffset | number | 0 | Сдвиг конца по вертикали, в пикселях. |
| className | string | — | Классы для слоя SVG. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge