AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Jakub AntalikComponents & kits

Liquid Gooey

Interactive demo and docs for the liquid-gooey npm package. Wrap UI in a Liquid container and animate Liquid.Item positions so buttons, menus, and handles merge, reshape, and trail like goo. The playground switches Morph vs Move and lets you dial goo blur and contrast. Install and usage snippets sit beside live demos so you can lift the effect into a product with clear starting parameters.

What's interesting

  • Liquid UI effects for React: Morph merges and dissolves touching pieces; Move trails a moving element as liquid rubber. Cross-browser, including Safari.
  • Interactive demo and docs for the liquid-gooey npm package.
  • Wrap UI in a Liquid container and animate Liquid.Item positions so buttons, menus, and handles merge, reshape, and trail like goo.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/liquid-gooey
Liquid Gooey by Jakub Antalik

Interactive demo and docs for the liquid-gooey npm package. Wrap UI in a Liquid container and animate Liquid.Item positions so buttons, menus, and handles merge, reshape, and trail like goo. The playground switches Morph vs Move and lets you dial goo blur and contrast. Install and usage snippets sit beside live demos so you can lift the effect into a product with clear starting parameters.

Adapt for our [screen name]. Stack: [your stack].
Note what to cut or simplify for production.

Tags

ReactMotionUIComponentsInteraction