Bounce Mark
Мячик из логотипа GRIGOGO для любого слова: прыгает по буквам, сплющивается при каждом приземлении и встаёт на место точки.
зависимости 0файлы tsx + cssпараметры 10react 18+
X 0000 Y 0000
Пульт10 параметров
01text
Слово.
02color
Цвет мячика.
03size
em
Диаметр мячика.
04hops
На сколько букв приземлится.
05height
em
Высота, с которой мячик падает на первую букву.
06bounce
Какую долю скорости мячик сохраняет после приземления.
07speed
Масштаб времени; траектория та же.
08trigger
Что запускает прыжки.
09trail
Гаснущие следы за мячиком.
10dip
Буквы проседают под приземлением.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text | string | "прыг-скок" | Слово. |
color | string | "#b6e24c" | Цвет мячика. |
size | number | 0.16 | Диаметр мячика. |
hops | number | 3 | На сколько букв приземлится. |
height | number | 1.4 | Высота, с которой мячик падает на первую букву. |
bounce | number | 0.68 | Какую долю скорости мячик сохраняет после приземления. |
speed | number | 1 | Масштаб времени; траектория та же. |
trigger | 'view' | 'hover' | 'loop' | "loop" | Что запускает прыжки. |
trail | boolean | true | Гаснущие следы за мячиком. |
dip | boolean | true | Буквы проседают под приземлением. |
loopDelay | number | 2200 | Пауза между повторами в режиме loop, мс. |
as | ElementType | 'span' | Какой элемент рендерить. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |