Effect

Liquid glass materialize

Glass appears by gaining its optics, not by fading in: the bend, the rim and the fill grow from nothing to full over a quarter of a second while the content settles in, and leave the same way.

Materialize: the same glass toolbar of share, bookmark and like at three stages over dunes, from barely there to whole.

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: Glass that comes and goes: a toolbar or a floating button appearing on scroll, a popover or menu opening, a body arriving in a morph group, a tab bar coming back after it was hidden.
Avoid: A plain opacity fade on glass (it reads as a grey card dissolving); materializing large text-heavy panels (sheets slide in instead); running it under Reduce Motion, where a short cross-fade replaces it.

Parameters. 200–300 ms, ease-out cubic; displacement, rim and glow opacity and the fill go 0 → 1 together; the content fades in over the last 60 %; the reverse on the way out; Reduce Motion: a 150 ms cross-fade.

How it is built

Design tool: Smart Animate between a frame with the Glass effect at Refraction 0, Depth 0, no rim, fill 0 and the final frame; stills show the end state.
Web: Animate the feDisplacementMap scale from 0 to its full value with requestAnimationFrame while the body's --glass-amount (fill) and the rim and glow opacity follow (web recipe section F, materialize()). SwiftUI: .glassEffectTransition(.materialize).

Shader, in one line

uDisp, the rim strength and the fill alpha all multiply by m = 1 − (1 − t)³ for t in 0…1 over the transition; m = 0 shows the plain backdrop.

Questions

Where should materialize be used?

Glass that comes and goes: a toolbar or a floating button appearing on scroll, a popover or menu opening, a body arriving in a morph group, a tab bar coming back after it was hidden.

When should materialize be avoided?

A plain opacity fade on glass (it reads as a grey card dissolving); materializing large text-heavy panels (sheets slide in instead); running it under Reduce Motion, where a short cross-fade replaces it.

How is materialize built on the web?

Animate the feDisplacementMap scale from 0 to its full value with requestAnimationFrame while the body's --glass-amount (fill) and the rim and glow opacity follow (web recipe section F, materialize()). SwiftUI: .glassEffectTransition(.materialize).