Enables modifier nodes to sample and manipulate pixels behind UI elements, creating GPU-accelerated liquid glass, lens and chromatic-dispersion effects using runtime shader-powered distortion.
Liquid unlocks a new capability for Compose Multiplatform: letting modifier nodes sample and manipulate the pixels behind them.
By tagging nodes as liquefiable, you can create effects that distort the underlying content in a way that isn't normally possible with Compose's rendering pipeline.
This enables Liquid Glass-style effects like dynamic frosted glass, lenses, and other distortions. Powered by RuntimeShaders/RuntimeEffects and ModifierNodeElement APIs, it delivers GPU-accelerated visuals to your Compose UI.
Add mavenCentral() and Liquid to your list of repositories and dependencies:
repositories {
mavenCentral()
}
dependencies {
implementation("io.github.fletchmckee.liquid:liquid:1.1.1")
}
Below is a simple implementation:
@Composable
fun LiquidScreen(
modifier: Modifier = Modifier,
liquidState: LiquidState = rememberLiquidState(),
) = Box(modifier) {
// Content layer for `liquefiable` source nodes
ImageBackground(
Modifier
.fillMaxSize()
.liquefiable(liquidState),
)
// Control layer for `liquid` effect nodes
LiquidButton(
Modifier
.align(Alignment.TopStart)
.liquid(liquidState),
)
}
Copyright 2025 Colin McKee
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Modifier nodes.Surfaced from shared tags and platforms — no rankings paid for.