Target Cursor
Курсор-прицел для секции: четыре уголка вращаются вокруг указателя, а над кнопкой или карточкой разлетаются и захватывают её края.
зависимости 0файлы tsx + css + tsпараметры 9react 18+
ReactReact NativeNestJS
X 0000 Y 0000↳ Наведите на кнопки или коснитесь их
Пульт09 параметров
01color
Цвет прицела.
02size
px
Размер прицела в покое.
03corner
px
Длина уголка.
04thickness
px
Толщина уголка.
05spin
s
Секунд на оборот в покое, 0 — без вращения.
06padding
px
Отступ вокруг захваченной цели.
07smoothing
1 — следует мгновенно.
08hideCursor
Скрывать системный курсор внутри.
09invertDot
Точка темнеет над целью своего же цвета.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
color | string | "#b6e24c" | Цвет прицела. |
size | number | 34 | Размер прицела в покое. |
corner | number | 10 | Длина уголка. |
thickness | number | 2 | Толщина уголка. |
spin | number | 3 | Секунд на оборот в покое, 0 — без вращения. |
padding | number | 6 | Отступ вокруг захваченной цели. |
smoothing | number | 0.22 | 1 — следует мгновенно. |
hideCursor | boolean | true | Скрывать системный курсор внутри. |
invertDot | boolean | true | Точка темнеет над целью своего же цвета. |
targetSelector | string | '.cursor-target' | Элементы, которые захватывают уголки. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |