3D и WebGLProНовое
Стеклянные капли
Несколько стеклянных капель сливаются и расходятся. Сквозь них преломляется фон, одна капля тянется за курсором.
Настройки
tint
background
stripeColor
Компонент Codearia · Условия использования
Параметры
10 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| tint | string | "#ffffff" | Оттенок стекла. Белый оставляет его прозрачным. |
| background | string | "#0a0a0a" | Цвет фона. |
| stripeColor | string | "#737373" | Цвет полос, которые видно сквозь стекло. |
| size | number | 1 | Размер капель. |
| smoothness | number | 0.5 | Как мягко капли сливаются. |
| refraction | number | 0.6 | Сила преломления в стекле. |
| speed | number | 1 | Скорость. 0 останавливает движение. |
| followPointer | boolean | true | Одна капля следует за курсором. |
| children | ReactNode | — | Содержимое поверх эффекта. |
| className | string | — | Классы для обёртки. |
Зависимости
Пакетов: 3
npm install ogl clsx tailwind-merge