haze-usage

Automate haze-based blur effects in Compose Multiplatform UIs.

Updated Aug 27, 2026

Search Tags:#glassmorphism #kotlin #ui-effects #compose-multiplatform #blur #haze

Ready to run

npx skills add https://github.com/benoberkfell/claude-plugins --skill haze-usage

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: haze-usage
Source: https://github.com/benoberkfell/claude-plugins/tree/main/plugins/haze/skills/haze-usage
Command: npx skills add https://github.com/benoberkfell/claude-plugins --skill haze-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Haze provides configurable blur effects (glassmorphism) for Compose Multiplatform, enabling blurred backgrounds and overlays to improve UI depth and readability.

Core Features & Use Cases

hazeSource and hazeEffect usage to blur content behind or within composables
blurEffect styling options including pre-built materials and custom styles
progressive (gradient) blur, masking, and overlapping layered effects
dynamic blur control and per-component configuration for realistic UI patterns

Quick Start

Create a hazeState with rememberHazeState(), apply hazeSource to your content, and attach hazeEffect with blurEffect on a target element such as a TopAppBar.

Frequently Asked Questions about haze-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add glassmorphism blur effects to a Compose Multiplatform UI?▼

To add glassmorphism blur effects in Compose Multiplatform, create a haze state with rememberHazeState(), apply hazeSource to your background content, and attach hazeEffect with blurEffect styling to your target composable.

Can I use progressive blur and masking for app bars across Android and iOS?▼

Yes, progressive gradient blur, masking, and overlapping layered effects are fully supported for app bars and overlays across Android, iOS, Desktop, and Web platforms using the hazeEffect and hazeSource APIs.

What is the best way to dynamically control blur depth in Kotlin Multiplatform?▼

Dynamic blur control is managed via LocalHazeState, allowing per-component configuration and runtime enabling or disabling of blur effects to achieve realistic UI patterns without recreating composables.

Does Haze work across all Compose Multiplatform targets including Web and Desktop?▼

Haze works across Android, iOS, Desktop, and Web platforms in Compose Multiplatform, applying configurable blur to backgrounds and overlays to consistently improve UI depth and readability.

How do I style blurred backgrounds with custom materials in Compose Multiplatform?▼

Blur styling uses the blurEffect parameter within hazeEffect, offering both pre-built materials and custom styles to configure the visual appearance of blurred backgrounds and overlays.

Why use Haze for blurred overlays instead of standard Compose blur modifiers?▼

Haze provides configurable glassmorphism with advanced features like progressive gradient blur, masking, and layered effects, offering deeper UI control than standard modifiers for immersive backgrounds.