Liquid Gooey

React gooey-merge and liquid-trail effects that keep text, icons and shadows crisp

Tier A · StrongAnimation LibraryPrimitivegooey.jakubantalik.com

(Visit gooey.jakubantalik.com ↗)(Docs)(Repository)

Preview image from gooey.jakubantalik.com

liquid-gooey is a zero-dependency React library that adds metaball 'goo' physics to real UI. It ships two wrapper components, <Liquid> and <Liquid.Item>, plus two effects: Morph (touching pieces bridge, merge and change shape like jelly) and Move (the surface trails a moving element with a droplet tail), and a `dissolve` modifier that melts imagery at the contact point via SVG displacement. Unlike the classic blur+alpha-contrast gooey hack, it splits rendering into an SVG silhouette layer that carries the goo and the shadow, and a content layer of untouched live DOM, so text stays sharp, box-shadow survives the merge, and Safari renders it correctly. For React engineers who want plus-menus, tab indicators, sliders and avatar chips to feel liquid without giving up real hit targets, ARIA or focus rings.

Install

npm install liquid-gooey

For an agent

Reach for this when a spec asks for an Apple-style gooey/metaball transition on interactive UI — a plus-menu that splits into droplets, a tab indicator that stretches between tabs, a slider thumb that lags on a spring, avatar chips that melt into a pill. Do not use the old CSS blur+contrast filter trick instead: it softens text, kills box-shadow, and renders wrong in Safari, which is precisely what this library exists to fix. Two integration rules decide whether it works: give every Liquid.Item a transparent background (the SVG blob below IS the surface), and size the <Liquid> group to contain the full travel of its items or the filter region clips. Merging is a ratio of `blur` to gap — if pieces that should bridge look separate, raise `blur` before debugging anything else. It composes with whatever you already use (Tailwind, shadcn/ui, Framer Motion drives position under effect="move"), needs only React >=18 with zero runtime deps, and `dissolve` is ignored with a dev warning under effect="move". Treat it as v0.1.0: rotation is not mirrored, and it writes `filter`/`mask-image` onto your elements during morph and dissolve, so do not stack your own there.

Why it is here. It is the first implementation that makes the gooey effect usable on production UI rather than decorative colored circles, by moving the filter onto a silhouette layer so real shadows, crisp type and Safari all survive. That single architectural decision is why it earned ~2k GitHub stars within days of release.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React
Styling: Inline styles, CSS custom properties
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Structured documentation, CLI installable, Copy-paste ready code, Client-rendered shell
Accessibility: Honors reduced motion, Focus management and visible focus, Accessible
Maturity: Beta
GitHub stars: 1,991
Package: liquid-gooey

Components it ships

2 total

Animation Transition

Helps you build

Action Sheet Tab Bar Navigation

Notable for

silhouette-layer architecture keeps text and images unfiltered
real box-shadow rendered on the merged goo
works in Safari, unlike CSS url() filters on HTML
springs compile to CSS linear() easings; loop sleeps at idle
zero runtime dependencies, React >=18 peer only

Provenance

Verified 2026-08-15. HTTP 200. https://gooey.jakubantalik.com/ (HTTP 200, React SPA shell — only the <title> and meta tags are readable without JS), https://github.com/Jakubantalik/Libraries, https://raw.githubusercontent.com/Jakubantalik/Libraries/main/packages/liquid-gooey/README.md (full API read), https://raw.githubusercontent.com/Jakubantalik/Libraries/main/packages/liquid-gooey/package.json, https://registry.npmjs.org/liquid-gooey (v0.1.0, published 2026-08-11, MIT), GitHub API repos/Jakubantalik/Libraries + /commits + /git/trees/main (stars 1991, forks 116, pushed 2026-08-11), https://raw.githubusercontent.com/Jakubantalik/Libraries/main/sites/gooey/playground/demos/*.tsx (6 demos enumerated from source)

Also in Motion & Interaction

gooey.jakubantalik.comTier A