Elastic Line
Разделитель, который ведёт себя как гитарная струна: курсор цепляет и тянет его, а если оттянуть слишком сильно — соскальзывает и звенит.
зависимости 0файлы tsx + tsпараметры 7react 18+
X 0000 Y 0000↳ Проведите курсором или пальцем поперёк струн
Пульт07 параметров
01color
Цвет линии.
02thickness
px
Толщина линии.
03height
px
Место для размаха.
04grab
px
С какого расстояния указатель цепляет линию.
05reach
px
Насколько тянется, прежде чем соскользнуть.
06tension
Больше — туже и быстрее звенит.
07damping
Как быстро затухает.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
color | string | "#b6e24c" | Цвет линии. |
thickness | number | 2 | Толщина линии. |
height | number | 80 | Место для размаха. |
grab | number | 18 | С какого расстояния указатель цепляет линию. |
reach | number | 32 | Насколько тянется, прежде чем соскользнуть. |
tension | number | 0.42 | Больше — туже и быстрее звенит. |
damping | number | 0.004 | Как быстро затухает. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |