liquid-gooey превращает обычные React-компоненты в «жидкие» интерфейсы: элементы могут сливаться, тянуться друг за другом и плавно менять форму.
🤩 Morph — объединяет элементы в gooey-массу
🤩 Move — создаёт жидкий след за движущимся элементом
🤩 Dissolve — позволяет изображениям «растворяться» при контакте
Эффект применяется к отдельному SVG-слою, а настоящий DOM остаётся сверху. Поэтому текст, иконки, фокус и интерактивность не страдают от blur-фильтров.
npm install liquid-gooey
<Liquid blur={6} contrast={18}>
<Liquid.Item x={open ? -54 : 0} y={open ? -34 : 0}>
<button>Menu</button>
</Liquid.Item>
</Liquid>
Есть поддержка Safari, prefers-reduced-motion, CSS-темизации и MIT-лицензия.
🔗 Полезно, если делаете нестандартные UI, интерактивные меню, табы или микровзаимодействия.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack