From 5e37e2bb539a8d35bd3de3c47f0b2c5d227197c5 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Thu, 19 Feb 2026 23:34:56 -0600
Subject: [PATCH] feat: add background shimmer effect, use mask for content
 scroll fade

---
 src/components/Header.astro  |   1 -
 src/layouts/BaseLayout.astro | 102 +++++++++++++++++++++++++++++------
 src/styles/global.css        |   6 +--
 3 files changed, 88 insertions(+), 21 deletions(-)
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 63eabe9..1ec1cf6 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -11,7 +11,6 @@ const currentPath = pathname.slice(1);
   id="nav"
   class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
 >
-  <div class="bg-linear-to-b from-background from-65% to-transparent to-90% absolute top-0 bottom-0 left-0 w-full h-36 z-0"/>
   <nav
     class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
     aria-label="Global"
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 32c5de3..f3ef0ca 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -66,21 +66,21 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       data-site-id={global.rybbit_site_id}
       defer
     />
-
   </head>
-  
-  <body class="bg-background selection:bg-yellow-400">
-    <!-- Disabled texture background for now
-    <div class="fixed inset-0 -z-10">
-      <div class="bg-grid-pattern absolute inset-0 mask-[radial-gradient(white,transparent_85%)] bg-position-[center_top_-1px]"/>
-    </div>
-    -->
 
+  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
+
+    <!-- Sliding backgrounds -->
+    <div class="bg"/>
+    <div class="bg bg2"/>
+    <div class="bg bg3"/>
+
+    <!-- Layout -->
     <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
-      
+
       <Header />
 
-      <main class="min-h-screen">
+      <main class="has-js scroll-fade-container min-h-screen">
         <slot />
       </main>
 
@@ -91,14 +91,84 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   </body>
 </html>
 
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const onScroll = () => {
+      document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
+      document.documentElement.classList.add('has-js');
+    };
+
+    window.removeEventListener('scroll', onScroll);
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    onScroll();
+  });
+</script>
+
 <style>
-  .bg-grid-pattern {
-    background-size: 24px 24px;
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
-    transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
+  /* Fade away content below header when scrolling */
+  .has-js .scroll-fade-container {
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0px,
+      transparent 16px,
+      black 80px,
+      black 100%
+    );
+
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0px,
+      transparent 16px,
+      black 80px,
+      black 100%
+    );
+
+    -webkit-mask-size: 100vw 100vh;
+    -webkit-mask-repeat: no-repeat;
+
+    -webkit-mask-position-y: var(--scroll-offset);
+    mask-position-y: var(--scroll-offset);
   }
 
-  :global(.dark) .bg-grid-pattern {
-    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
+  /* Background that creates the "glimmer" effect */
+  .bg {
+    animation: slide 20s ease-in-out infinite alternate;
+    background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
+    filter: blur(80px);
+    top: 0;
+    bottom: 0;
+    left: -50%;
+    right: -50%;
+    opacity: .5;
+    position: fixed;
+    z-index: -1;
+    --bg-primary: #e5e5e5;
+    --bg-secondary: #d9d9d9;
+    --bg-tertiary: #ededed;
+  }
+
+  :global(.dark) .bg {
+    --bg-primary: #292524;
+    --bg-secondary: #44403c;
+    --bg-tertiary: #57534e;
+  }
+
+  .bg2 {
+    animation-direction: alternate-reverse;
+    animation-duration: 30s;
+  }
+
+  .bg3 {
+    animation-duration: 25s;
+  }
+
+  @keyframes slide {
+    0% {
+      transform:translateX(-25%);
+    }
+    100% {
+      transform:translateX(25%);
+    }
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 7437b51..f433fad 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -50,8 +50,9 @@
   :root {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    
     --theme-transition: 0.3s ease;
-    color-scheme: light;
+    --scroll-offset: 0px;
   }
 
   :root:where(.dark, .dark *) {
@@ -73,9 +74,6 @@
   }
 
   body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
     --swup-fade-theme-duration: 0.2s;
   }
 
