Waves
Поле линий, которое само по себе колышется и расходится вокруг курсора, как вода: каждая точка на пружине, поэтому быстрый взмах оставляет след.
зависимости 0файлы tsx + tsпараметры 9react 18+
X 0000 Y 0000↳ Проведите по линиям
Пульт09 параметров
01lineColor
Цвет линий.
02gap
px
Расстояние между линиями.
03lineWidth
px
Толщина линий.
04amplitude
px
Высота спокойной волны.
05speed
Скорость волны.
06radius
px
Радиус действия курсора.
07strength
px
Насколько сильно курсор раздвигает линии.
08tension
Жёсткость пружины: больше — быстрее возврат.
09fadeColor
Цвет, в который уходят края.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
lineColor | string | "#b6e24c" | Цвет линий. |
gap | number | 18 | Расстояние между линиями. |
lineWidth | number | 1 | Толщина линий. |
amplitude | number | 14 | Высота спокойной волны. |
speed | number | 1 | Скорость волны. |
radius | number | 160 | Радиус действия курсора. |
strength | number | 46 | Насколько сильно курсор раздвигает линии. |
tension | number | 0.06 | Жёсткость пружины: больше — быстрее возврат. |
fadeColor | string | "#0c0c0b" | Цвет, в который уходят края. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |