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.

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

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once

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.

Questions

Where should morph be used?

Transitions: tab/segment indicator travel, a floating button expanding into a toolbar or menu, grouped icon buttons merging, search field expanding.

When should morph be avoided?

Permanent blobby shapes in static layouts; wobble that continues after the gesture; morph under reduced motion.

How is morph built on the 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.