Add alpha-masked progressive blur demo

catalog/src/main/java/com/kyant/backdrop/catalog/CatalogDestination.kt

@@ -14,6 +14,7 @@ enum class CatalogDestination {
 
     GlassPlayground,
     AdaptiveLuminanceGlass,
+    ProgressiveBlur,
     ScrollContainer,
     LazyScrollContainer,
 }

catalog/src/main/java/com/kyant/backdrop/catalog/MainContent.kt

@@ -15,6 +15,7 @@ import com.kyant.backdrop.catalog.destinations.GlassPlaygroundContent
 import com.kyant.backdrop.catalog.destinations.HomeContent
 import com.kyant.backdrop.catalog.destinations.LazyScrollContainerContent
 import com.kyant.backdrop.catalog.destinations.MagnifierContent
+import com.kyant.backdrop.catalog.destinations.ProgressiveBlurContent
 import com.kyant.backdrop.catalog.destinations.ScrollContainerContent
 import com.kyant.backdrop.catalog.destinations.SliderContent
 import com.kyant.backdrop.catalog.destinations.ToggleContent
@@ -41,6 +42,7 @@ fun MainContent() {
 
         CatalogDestination.GlassPlayground -> GlassPlaygroundContent()
         CatalogDestination.AdaptiveLuminanceGlass -> AdaptiveLuminanceGlassContent()
+        CatalogDestination.ProgressiveBlur -> ProgressiveBlurContent()
         CatalogDestination.ScrollContainer -> ScrollContainerContent()
         CatalogDestination.LazyScrollContainer -> LazyScrollContainerContent()
     }

catalog/src/main/java/com/kyant/backdrop/catalog/destinations/HomeContent.kt

@@ -55,6 +55,7 @@ fun HomeContent(onNavigate: (CatalogDestination) -> Unit) {
             Subtitle("Experiments")
             ListItem({ onNavigate(CatalogDestination.GlassPlayground) }, "Glass playground")
             ListItem({ onNavigate(CatalogDestination.AdaptiveLuminanceGlass) }, "Adaptive luminance glass")
+            ListItem({ onNavigate(CatalogDestination.ProgressiveBlur) }, "Progressive blur")
             ListItem({ onNavigate(CatalogDestination.ScrollContainer) }, "Scroll container")
             ListItem({ onNavigate(CatalogDestination.LazyScrollContainer) }, "Lazy scroll container")
         }

catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ProgressiveBlurContent.kt

@@ -0,0 +1,78 @@
+package com.kyant.backdrop.catalog.destinations
+
+import android.graphics.RenderEffect
+import android.graphics.RuntimeShader
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kyant.backdrop.catalog.BackdropDemoScaffold
+import com.kyant.backdrop.drawPlainBackdrop
+import com.kyant.backdrop.effects.blur
+import com.kyant.backdrop.effects.effect
+
+@Composable
+fun ProgressiveBlurContent() {
+    val isLightTheme = !isSystemInDarkTheme()
+    val contentColor = if (isLightTheme) Color.Black else Color.White
+    val tintColor = if (isLightTheme) Color.White else Color(0xFF808080)
+
+    BackdropDemoScaffold { backdrop ->
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(16f.dp)
+        ) {
+            Box(
+                Modifier
+                    .drawPlainBackdrop(
+                        backdrop = backdrop,
+                        shape = { RectangleShape },
+                        effects = {
+                            blur(4f.dp.toPx())
+                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                                effect(
+                                    RenderEffect.createRuntimeShaderEffect(
+                                        RuntimeShader(
+                                            """
+uniform shader content;
+
+uniform float2 size;
+layout(color) uniform half4 tint;
+
+half4 main(float2 coord) {
+    float blurAlpha = smoothstep(size.y, size.y * 0.5, coord.y);
+    float tintAlpha = smoothstep(size.y, size.y * 0.5, coord.y);
+    return mix(content.eval(coord) * blurAlpha, tint * tintAlpha, 0.5);
+}"""
+                                        ).apply {
+                                            setFloatUniform("size", size.width, size.height)
+                                            setColorUniform("tint", tintColor.toArgb())
+                                        },
+                                        "content"
+                                    )
+                                )
+                            }
+                        }
+                    )
+                    .height(128f.dp)
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.Center
+            ) {
+                BasicText("alpha-masked progressive blur", style = TextStyle(contentColor, 16f.sp))
+            }
+        }
+    }
+}