Haze

Haze — Visual Effects for Compose Multiplatform

Haze is a Compose Multiplatform library providing visual effects such as blur (glassmorphism). Supports Android, Desktop (JVM), iOS, Wasm, JS/Canvas.

Available Sub-Skills

Architecture

Haze v2 uses a modular architecture:

haze (core: VisualEffect, HazeState, modifiers)
├── haze-blur (blur effect)
│   └── haze-materials (pre-built styles: Material, Cupertino, Fluent)
└── haze-utils (platform utilities)

Each effect lives in its own module. Future effects (e.g., haze-liquidglass) follow the same pattern. Effects register via builder extensions on HazeEffectScope:

// Effects are set via HazeEffectScope.visualEffect property
Modifier.hazeEffect(state) {
    blurEffect { style = HazeMaterials.thin() }     // sets visualEffect = BlurVisualEffect
    // liquidglassEffect { ... }                     // future: sets visualEffect = LiquidGlassEffect
}

Quick Start

// Dependencies
implementation("dev.chrisbanes.haze:haze:<version>")
implementation("dev.chrisbanes.haze:haze-blur:<version>")
implementation("dev.chrisbanes.haze:haze-materials:<version>")

// Basic background blur
val hazeState = rememberHazeState()

Box {
    LazyColumn(modifier = Modifier.fillMaxSize().hazeSource(state = hazeState)) { /* content */ }
    TopAppBar(
        colors = TopAppBarDefaults.largeTopAppBarColors(Color.Transparent),
        modifier = Modifier.hazeEffect(state = hazeState) {
            blurEffect { style = HazeMaterials.thin() }
        }
    )
}

Core Concepts Summary

For detailed guidance, load the appropriate sub-skill above.