Enhance Haze Library with Progressive Gradient Blur Feature

[itsbppradhan]

Information

• Haze version: 0.9.0-beta3
• Platform: [Android, Windows]
• Platform version: [Android 15 AOSP]

Hello,

I hope this message finds you well! I would like to request a new feature for the Haze library: a Progressive Gradient Blur effect. This enhancement aims to provide developers with a powerful tool to improve the visual design and user experience of their applications.

After digging through the examples, I had a peek on the mask option available. However, I believe there is an opportunity to explore more refined approaches in future iterations, enhancing the overall visual experience and maintaining the library's commitment to high-quality effects, which is why I believe a more sophisticated gradient blur feature would be beneficial.

Feature Details:

1. Progressive Gradient Blur:

   • A blur effect that gradually increases in intensity from one edge (e.g., top) to another (e.g., bottom). This would create a smooth, visually appealing transition, particularly beneficial for elements like app bars and backgrounds.

2. Customization Options:

   • Gradient Direction: Users can specify the direction of the gradient (top-to-bottom, bottom-to-top, left-to-right, etc.), with the possibility of diagonal gradients in future versions.
   • Intensity Control: Allow users to adjust both the starting and ending intensity of the blur, providing greater control over the visual output.

3. Interactive UI:

   • An intuitive interface for applying and adjusting the gradient blur effect seamlessly.

Additional Attachments:

I’ve added two key attachments to illustrate how this effect can be achieved using the current mask setup and how it can be further improved:

• i) A List of 10 Masks and Blurs: These masks are applied on top of each other, each with a 10% difference. This stacking technique could help achieve a more progressive blur effect, where the intensity increases smoothly across the surface.

• ii) Illustration of Highest and Lowest Mask: This attachment shows the contrast between the highest(mask 100%) and lowest(mask 10%) mask (only 2 out of 10 shown for simplicity), demonstrating how layering can create a more refined, progressive blur.

Figma File:

For a more detailed visual representation, I have also provided a Figma file outlining my design concept. You can view it here.

How the Current Mask Can Help:

While the existing mask feature provides a basic level of blurring, it could be enhanced to achieve a true progressive blur by layering multiple masks or using a blend mode that supports gradual transitions between blur intensities. By tweaking the current setup and introducing slight variations in mask opacity or blur radius, a smoother effect can be accomplished, leading to a more polished and visually appealing result.

Example Use Case:

I’ve attached an image demonstrating my envisioned design for the settings app, showcasing how a gradient blur could enhance the user experience with a smooth transition effect as content scrolls.

Recording.2024-10-08.115856.mp4

Benefits:

• Enhances the visual design of applications.
• Improves user experience through seamless transitions.
• Mimics high-quality blur effects commonly seen in modern mobile interfaces.

Thank you for considering this request. I believe this feature could significantly benefit developers aiming to create visually stunning applications. I’m eager to collaborate on this enhancement.

Best regards,
@itsbppradhan

[chrisbanes]

Nothing has changed since the last time that you opened this in #266.

Progressive blurs are extremely expensive, as they require running multiple cumulative blurring rounds (usually in the region of 8).

It's technically possible, but my fear is that performance would be terrible.

[itsbppradhan]

I appreciate your feedback on the performance concerns with progressive blurs. I understand that they can be resource-intensive, but perhaps we could explore optimizing the implementation or limiting the number of blur rounds to find a balance between visual quality and performance.