Dot Grid
Поле точек на пружинах: расступаются вокруг курсора и расходятся волной по клику.
зависимости 0файлы tsx + tsпараметры 12react 18+
X 0000 Y 0000↳ Ведите и кликайте или тяните и касайтесь
Пульт12 параметров
01dotSize
px
Диаметр точки.
02gap
px
Расстояние между точками.
03baseColor
Цвет в покое.
04activeColor
Цвет рядом с курсором.
05proximity
px
Радиус действия курсора.
06push
px
Сила отталкивания.
07stiffness
Сила возврата пружины.
08damping
Больше — сильнее качается.
09shockwave
Волна по клику.
10shockStrength
px
Насколько волна сдвигает точки.
11waveSpeed
px/s
Скорость волны.
12waveWidth
px
Ширина фронта волны.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
dotSize | number | 3 | Диаметр точки. |
gap | number | 26 | Расстояние между точками. |
baseColor | string | "#34332e" | Цвет в покое. |
activeColor | string | "#b6e24c" | Цвет рядом с курсором. |
proximity | number | 130 | Радиус действия курсора. |
push | number | 18 | Сила отталкивания. |
stiffness | number | 0.08 | Сила возврата пружины. |
damping | number | 0.82 | Больше — сильнее качается. |
shockwave | boolean | true | Волна по клику. |
shockStrength | number | 9 | Насколько волна сдвигает точки. |
waveSpeed | number | 620 | Скорость волны. |
waveWidth | number | 46 | Ширина фронта волны. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |