КурсорыНовое
Круги на воде
Поверхность как вода: клик пускает круги, а курсор оставляет мелкую рябь. Сетка под водой изгибается.
Настройки
color
background
Компонент Codearia · Условия использования
Ещё в Pro
Смотреть всеПараметры
10 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| color | string | "#ffffff" | Цвет сетки и бликов. |
| background | string | "#0a0a0a" | Цвет поверхности. |
| gridSize | number | 32 | Шаг сетки, в пикселях. 0 убирает сетку. |
| strength | number | 1 | Высота волн. |
| speed | number | 1 | Скорость. 0 останавливает движение. |
| lifetime | number | 3 | Сколько живёт одна волна, в секундах. |
| rippleOnMove | boolean | true | Оставлять мелкие круги при движении курсора. |
| autoDemo | boolean | true | Сами пускать круги, пока посетитель не тронул блок. |
| children | ReactNode | — | Содержимое поверх эффекта. |
| className | string | — | Классы для обёртки. |
Зависимости
Пакетов: 3
npm install ogl clsx tailwind-merge