liquidGlass
A glass sheet slides down, swaps, and slides back up.
The full recording — the example app on an Android
emulator and an iOS simulator at once, with liquidGlass played several times
over. Scrub or pause with the controls.
A sheet of Liquid Glass slides down over the screen, holds while the theme changes behind it, then slides back up. The swap happens entirely out of sight, so the sheet reads as a physical pane rather than a reveal boundary — which is why this has the highest duration floor of the sixteen.
Options it takes
| Option | Type | Default | What it does here |
|---|---|---|---|
origin |
{ x: number; y: number } |
screen centre |
Where the effect starts, in dp. Pass a touch’s pageX/pageY as-is — the offset inside a modal or form sheet is corrected natively. |
durationMs |
number |
650 |
Animation length. Clamped up to this kind’s floor; 0 means no animation and is never clamped. |
settleFrames |
number |
2 |
Display frames to hold the snapshot before revealing, so the theme swap has painted underneath. |
Ignored by this kind: direction, angleDeg, shape, blurStyle, bands. Passing them is harmless.
Minimum duration
A request below 620ms is clamped up to it, natively, so both
platforms agree. Below that floor a full-screen copy coming apart has too few frames to
read as motion — the eye gets the start and the end and nothing in between, which looks
like a flicker rather than a fast transition. durationMs: 0 still means “no
animation” and is never clamped.
Usage
withThemeTransition(applyTheme, {
kind: 'liquidGlass',
durationMs: 650,
origin: { x: pageX, y: pageY },
});How it is done
| iOS | a sliding UIGlassEffect sheet, swap held behind it |
|---|---|
| Android | falls back to blur |