Gooey-эффекты для React без мыла на тексте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
