skills.rest
benoberkfell
benoberkfellCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/benoberkfell/claude-plugins --skill haze-usage
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
vinitgirdharvinitgirdhar

compose-multiplatform-patterns

Standardize Compose Multiplatform UI patterns for Kotlin projects across Android, iOS, Desktop, and Web.

Community
Intermediate
Kototoro-appKototoro-app
467

haze-blur

Configure and style Haze blur effects in Kotlin-based UI development for Android 11+.

Official
Advanced
xxihxxih
1

compose-multiplatform-patterns

Manage shared Compose UI patterns across Kotlin Multiplatform projects.

Community
Intermediate
shaharKeisarAppsshaharKeisarApps

quality-expert

Configure Detekt, ktlint, and Spotless for Kotlin Multiplatform modules.

Community
Advanced