Composable visual effects for Compose Multiplatform.

Haze provides hardware-accelerated visual effects for Compose Multiplatform — Android, iOS, macOS, Desktop, and Web. Its modular Haze 2 API lets you apply source-backed or own-content Blur, refraction-driven Glass, and custom effects with explicit, reusable configuration.

Haze 2.0 is currently in beta. If you are upgrading from Haze 1.x or an earlier Haze 2 prerelease, see the Haze 2 migration guide.

Add the core module and only the effect modules you use. Keep every Haze artifact on the same version.

dependencies {
    // Core infrastructure and Blur
    implementation("dev.chrisbanes.haze:haze:<version>")
    implementation("dev.chrisbanes.haze:haze-blur:<version>")

    // Optional: ready-made Blur styles
    implementation("dev.chrisbanes.haze:haze-blur-materials:<version>")
}

For Glass, add the core module and the Glass artifact:

dependencies {
    implementation("dev.chrisbanes.haze:haze:<version>")
    implementation("dev.chrisbanes.haze:haze-glass:<version>")
}

val hazeState = rememberHazeState()

Box {
    Image(
        painter = painter,
        contentDescription = null,
        modifier = Modifier.hazeSource(hazeState),
    )
    Box(
        modifier = Modifier
            .matchParentSize()
            .hazeBlur(
                input = HazeInput.Sources(hazeState),
                style = HazeBlurStyle { blurRadius(20.dp) },
            ),
    )
}

HazeInput.Sources renders captured hazeSource content. Use HazeInput.Content to blur the modifier's own content instead. HazeBlurStyle is immutable and reusable; use then to derive a variation or supply a replacement Style when its appearance changes.

The optional Blur material presets provide HazeMaterials.ultraThin(), thin(), regular(), thick(), and ultraThick(). The haze-blur-material3 integration provides HazeBlurStyle.Material3() for a Style based on the current Material 3 surface.

haze-glass is a Haze 2 module for material-like Glass: refraction, depth Blur, tint, lighting, highlights, rounded shapes, and optional pointer, focus, and press responses.

Modifier.hazeGlass(
    input = HazeInput.Sources(hazeState),
    style = GlassStyle.regular.then {
        tint(Color.White.copy(alpha = 0.16f))
        shape(RoundedCornerShape(20.dp))
    },
)

Start with GlassStyle.regular, or use GlassStyle.clear when the background should remain more visible. Consult the Glass guide for custom optics, interaction, retention, and platform fallback behavior. Add haze-glass-material3 to use material3() with your current Material 3 surface color. Regular and Clear follow the system appearance without Material 3. The optional integration supplies the app theme's surface color and can add a tint.

Built-in Blur and Glass use HazePerformanceMode.Default, which selects the fixed Balanced profile. Begin with that setting and measure a release-like build on representative devices before selecting Quality, Performance, or Fixed(...). Adaptive remains as a deprecated compatibility alias for Default. Custom effects keep the separate HazeSampling policy. See the performance guide for the decision framework and effect-specific guidance.

Blur and Glass can process a live camera preview when its pixels are drawn in the same Compose graphics layer as hazeSource. On Android, CameraX requires PreviewView.ImplementationMode.COMPATIBLE; a SurfaceView cannot be captured. The camera guide covers CameraX, Kamera, and the same constraint for video and other platform views.

• Haze documentation
• Blur guide
• Glass guide
• Custom effects
• Sample code
• Haze 2 migration guide

Copyright 2024 Chris Banes

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.