3D и WebGLНовое
Жидкий металл
Поверхность из текучего хрома на WebGL. Переливается сама и тянется за курсором. Можно залить металлом текст.
Настройки
tint
Основано на Liquid Metal (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| variant | 'chrome' | 'mercury' | 'gold' | 'oil' | "chrome" | Материал поверхности. |
| distortion | number | 1 | Сила волн. 0 почти ровный лист, 2 расплав. |
| speed | number | 1 | Скорость течения. |
| pointerInfluence | boolean | true | Курсор толкает металл. |
| maskText | boolean | false | Заливать металлом только текст внутри. |
| paused | boolean | false | Остановить на текущем кадре. |
| children | ReactNode | — | Содержимое поверх металла или текст для заливки. |
| tint | string | "#ffffff" | Оттенок металла, как у анодированного. Белый оставляет вариант как есть. |
| className | string | — | Классы для обёртки. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge