GeezerVison

npm install liquid-gooey

import { Liquid } from 'liquid-gooey'

<Liquid blur={6} contrast={18} fill="#fff" shadow="0 2px 6px rgba(0,0,0,.08)">
  <Liquid.Item x={open ? -54 : 0} y={open ? -34 : 0} transition="bouncy">
    <button className="round-btn">…</button>
  </Liquid.Item>
  <Liquid.Item x={0} y={open ? -64 : 0} transition="bouncy" delay={40}>
    <button className="round-btn">…</button>
  </Liquid.Item>
</Liquid>

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