hopefully cool thing

pages/user/index.html

@@ -1,7 +1,22 @@
 <!--PAGENAME=Hello, <template name="username">-->
-<header>
+<header class="user-index-header">
-    <div class="user-index-header-text"> 
+    <div class="user-index-header-text" id="headerText">
         <h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
         <h2 class="user-index-h2">What would you like to watch?</h2>
     </div>
 </header>
+
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const headerText = document.getElementById("headerText");
+
+        window.addEventListener("scroll", function () {
+            const scrollPosition = window.scrollY;
+            const opacity = 1 - scrollPosition / 500; // Adjust the divisor for a smoother or faster fade
+
+            headerText.style.opacity = opacity.toFixed(2);
+            headerText.style.transform = `translateX(${100 - opacity * 100}%)`;
+        });
+    });
+</script>

styles/global.css

@@ -1,10 +1,11 @@
 /* Common styles for all pages */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
     background-color: #161c21;
     color: aliceblue;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
 h2 {
@@ -33,18 +34,25 @@ a {
     margin: auto;
     text-align: left;
     padding: 0;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: opacity 0.8s ease, transform 1s ease;
 }
+
 .user-index-h1 {
     font-size: 4rem;
     text-align: left;
 }
+
 .user-index-h2 {
     font-size: 3.3rem;
     text-align: left;
 }
 
-
 .outlined-text {
     -webkit-text-fill-color: transparent;
     -webkit-text-stroke: 2.2px #8c00ff;
 }
+
+
+