Fix the landing background on scroll.

app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingItem.kt

@@ -5,7 +5,6 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.annotation.DrawableRes
 import androidx.annotation.FloatRange
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -24,7 +23,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
@@ -71,9 +69,6 @@ fun LandingItem(
     shape: Shape = remember { RoundedCornerShape(size = 8.dp) },
     textStyle: TextStyle = MaterialTheme.typography.bodyMedium,
     dropCapStyle: SpanStyle = MaterialTheme.lexicon.typography.dropCap.bodyMedium,
-    backgroundFilter: ColorFilter? = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface),
-    @FloatRange(from = 0.0, to = 1.0) backgroundGradientFrom: Float = 0.5f,
-    @FloatRange(from = 0.0, to = 1.0) backgroundGradientTo: Float = 1f,
     rotation: Float = 0f,
     alpha: Float = 0.6f,
     onClick: (LandingItemUio) -> Unit,
@@ -96,22 +91,10 @@ fun LandingItem(
                 alpha = alpha,
                 contentScale = ContentScale.Fit,
                 alignment = Alignment.TopCenter,
-                colorFilter = backgroundFilter,
                 contentDescription = null,
             )
         }
 
-        Box(
-            modifier = Modifier
-                .matchParentSize()
-                .background(
-                    brush = rememberBackgroundGradient(
-                        from = backgroundGradientFrom,
-                        to = backgroundGradientTo,
-                    )
-                )
-        )
-
         Column(
             modifier = Modifier.align(alignment = Alignment.BottomCenter),
             horizontalAlignment = Alignment.CenterHorizontally,

app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingScreen.kt

@@ -31,12 +31,14 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
@@ -81,7 +83,7 @@ fun LandingScreen(
     val screen = LocalScreenNavHost.current
 
     Surface(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier.fillMaxSize(),
     ) {
         LandingContent(
             modifier = Modifier
@@ -166,7 +168,14 @@ private fun LandingContent(
             (paddings.calculateTopPadding() + paddings.calculateBottomPadding()).toPx()
         }
     }
-
+    val backgroundAlpha = remember {
+        derivedStateOf {
+            ((verticalPadding - scrollState.value) / verticalPadding).coerceIn(
+                minimumValue = 0f,
+                maximumValue = 1f,
+            )
+        }
+    }
     Box(
         modifier = modifier,
     ) {
@@ -174,12 +183,7 @@ private fun LandingContent(
             modifier = Modifier
                 .fillMaxWidth()
                 .aspectRatio(1f)
-                .graphicsLayer {
+                .graphicsLayer { this.alpha = backgroundAlpha.value }
-                    this.alpha = ((verticalPadding - scrollState.value) / verticalPadding).coerceIn(
-                        minimumValue = 0f,
-                        maximumValue = 1f,
-                    )
-                }
                 .clip(RectangleShape),
         ) {
             Image(
@@ -208,6 +212,7 @@ private fun LandingContent(
             Box(
                 modifier = Modifier
                     .matchParentSize()
+                    .scrollOffset(scrollState) { -it / 3 }
                     .background(brush = rememberBackgroundGradient()),
             )
         }
@@ -253,9 +258,6 @@ private fun LandingContent(
                             textStyle = MaterialTheme.typography.titleMedium,
                             dropCapStyle = MaterialTheme.lexicon.typography.dropCap.titleMedium,
                             item = character,
-                            backgroundFilter = null,
-                            backgroundGradientFrom = 0f,
-                            backgroundGradientTo = 0.5f,
                             onClick = { onFeature(character) },
                         )
                     }
@@ -291,9 +293,6 @@ private fun LandingContent(
                                 bottom = 24.dp,
                             ),
                             item = item,
-                            backgroundFilter = null,
-                            backgroundGradientFrom = 0.0f,
-                            backgroundGradientTo = 0.5f,
                             onClick = { onFeature(item) },
                         )
                     }
@@ -329,9 +328,6 @@ private fun LandingContent(
                                 bottom = 24.dp,
                             ),
                             item = item,
-                            backgroundFilter = null,
-                            backgroundGradientFrom = 0.0f,
-                            backgroundGradientTo = 0.5f,
                             onClick = { onFeature(item) },
                         )
                     }
@@ -367,9 +363,6 @@ private fun LandingContent(
                                 bottom = 24.dp,
                             ),
                             item = item,
-                            backgroundFilter = null,
-                            backgroundGradientFrom = 0.0f,
-                            backgroundGradientTo = 0.5f,
                             onClick = { onFeature(item) },
                         )
                     }