Effect

Liquid glass morph

Glass bodies behave like liquid: when they come closer than their merge spacing they fuse with a smooth neck; indicators stretch while moving; a button can swell into a menu.

Also called gooey, merge, metaball, blob, fluid, merging, morphing

Two clear lens lobes merging into one liquid shape over dunes.
Two clear lens lobes merging into one liquid shape over dunes. (light)

Where to use it

Use in
Transitions: tab/segment indicator travel, a floating button expanding into a toolbar or menu, grouped icon buttons merging, search field expanding.
Avoid
Permanent blobby shapes in static layouts; wobble that continues after the gesture; morph under reduced motion.

Parameters

merge spacing 12–24 px, spring 300–450 ms with 0.15–0.3 bounce, stretch up to 1.2× along the motion.

How it is built

Design tool
Smart Animate between frames where shapes overlap/merge; union the shapes with a large corner smoothing at the neck for stills.
Web
WebGL: smooth-union of shape SDFs (smin) feeding the same refraction. DOM: animate one glass body's width/position (transform) between targets instead of fading two.
Shader, in one line
float smin(float a, float b, float k){ float h = clamp(0.5 + 0.5*(b - a)/k, 0.0, 1.0); return mix(b, a, h) - k*h*(1.0 - h); } — use the merged distance for normal, bend and rim.