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),
)
}Modifier nodes.
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://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
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),
)
}Modifier nodes.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://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.