design-infraReport a problem or share feedback← Catalog
Liquid Gooey
curatedfreelibrariesdev/liquid-gooey
Liquid UI effects: Morph (gooey merge), Move (rubber trails), Melt (image crossfade), Bend (velocity bow). SVG-filter based, Safari-safe.
$
pnpm add liquid-gooeynpm deps: liquid-gooey
Our notes
Playful merges for FABs, tab pills, menus. Too much for enterprise UIs.- Source
- libraries.dev
- Kind
- package
- Categories
- transition, misc
- Use as
- wrapper — wraps your existing element
- Applies to
- buttontabsnavigation
- Motion
- on state, hover · medium · svg + canvas · medium cost · respects reduced motion
- Tags
- npm, mit
- Licence
- MIT (packages). Pro subscription adds a Studio + agent skills.
- Live demo
- libraries.dev
- Docs
- libraries.dev
Similar
Compare all 4 →- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.
- Motion presetsoc/motion-presetsdesign-infra's motion languages (still / quiet / lively / cinematic) as motion/react transitions, springs and variants (fadeUp, scaleIn, stagger, press, lift). Set PROJECT_MOTION to your DESIGN.md `motion:` so hand-written animations match the system.
- Liquid Glass (@samasante/liquid-glass)liquidglass/liquid-glassWrap any styled box in <Glass> (your translucent background is the tint; children stay crisp; optics via the optics prop). True refraction of the live page is Chrome/Edge only (backdrop-filter: url()); Safari/Firefox fall back to frost + tint + edge light. To bend in every browser, give it geometry (size + center) to refract its own children, or refract={copy} / src for images, video and canvas (WebGL). Headless — tint it with your tokens. v0.1.x: pin the version; use one or two lenses per screen and check text contrast over busy backgrounds. React >=18 peer, zero runtime deps, MIT.