Grid Motion
Ряды плиток разъезжаются в разные стороны, когда курсор идёт по экрану, а в покое мягко покачиваются. В плитки можно положить что угодно.
зависимости 0файлы tsx + css + tsпараметры 11react 18+
X 0000 Y 0000↳ Ведите курсором по превью
Пульт11 параметров
01rows
Число рядов.
02columns
Плиток в ряду.
03strength
px
Как далеко уезжают ряды.
04smoothing
Как быстро ряды следуют за курсором.
05drift
Покачивание без курсора.
06angle
deg
Наклон сетки.
07gap
px
Расстояние между плитками.
08radius
px
Скругление углов.
09tileColor
Фон плитки.
10textColor
Цвет текста в плитках.
11fadeColor
Цвет виньетки.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
rows | number | 5 | Число рядов. |
columns | number | 8 | Плиток в ряду. |
strength | number | 260 | Как далеко уезжают ряды. |
smoothing | number | 0.06 | Как быстро ряды следуют за курсором. |
drift | number | 0.4 | Покачивание без курсора. |
angle | number | -12 | Наклон сетки. |
gap | number | 14 | Расстояние между плитками. |
radius | number | 14 | Скругление углов. |
tileColor | string | "#161614" | Фон плитки. |
textColor | string | "#edeae3" | Цвет текста в плитках. |
fadeColor | string | "#0c0c0b" | Цвет виньетки. |
items | ReactNode[] | — | Содержимое плиток: текст, картинки, что угодно; повторяется, чтобы заполнить сетку. |
minTileWidth | number | 150 | Минимальная ширина плитки на узких экранах, px. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |