# Liquid glass morph: parameters and references

Source: https://meniscus.site/effects/morph · Updated 2026-09-27

**Looks like:** 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.

**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.

**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:** `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.`

## References

![Two clear lens lobes merging into one liquid shape over dunes.](https://meniscus.site/gallery/morph-light-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_effect_spec` tool returns for `morph`. Materials, colours, light and composition rules that apply to every effect are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs