Gooey

Liquid UI for React. Touching pieces merge like goo and morph like jelly while text stays crisp.

Preview Install Usage

Tune in Studio Copy prompt

Add the Gooey effect from Libraries.dev to my React app.

Install:
npm install liquid-gooey

Usage:
import { Liquid } from 'liquid-gooey'

<Liquid blur={6} contrast={18} fill="#fff">
  <Liquid.Item x={open ? -54 : 0} y={open ? -34 : 0} transition="bouncy">
    <button className="round-btn">…</button>
  </Liquid.Item>
</Liquid>

Props:
- Liquid: blur (goo softness), contrast (edge tightness), fill, shadow
- Liquid.Item: effect ("morph" | "move" | "melt" | "bend"), x, y, transition, delay

Wrap the pieces that should merge in <Liquid> and mark each one <Liquid.Item>.
Touching items melt into each other while their text stays crisp. Cross-browser,
Safari included; zero runtime dependencies, React 18 or newer.
Docs: https://libraries.dev/gooey.html