# Liquid glass materialize: parameters

Source: https://meniscus.site/effects/materialize · Updated 2026-10-02

**Looks like:** 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. The backdrop is never covered by a half-transparent grey card on the way.

Also called: materialise, appear, emerge, glass in, glass transition.

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

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

## Reference renders

The tool attaches these images; each shows:

- Materialize: the same glass toolbar of share, bookmark and like at three stages over dunes, from barely there to whole. (light)
- Materialize: the same glass toolbar of share, bookmark and like at three stages over a night skyline, from barely there to whole. (dark)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_spec` tool returns for `materialize`. 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