feat: cooler header

packages/website/src/components/HomeHero.astro

@@ -11,48 +11,77 @@ const isBranchNamed = branchName !== undefined;
     --p-1: 0%;
     --p-2: 0%;
     --p-3: 0%;
+    --p-4: 0%;
+    --p-5: 0%;
 
-    --gradient-color-1: color-mix(
+    --g-1-dark: var(--blue-3);
-      in srgb,
+    --g-1-light: var(--blue-5);
-      var(--jade-1),
+    --g-2-dark: var(--violet-3);
-      var(--jade-5) var(--p-1)
+    --g-2-light: var(--violet-5);
-    );
+    --g-3-dark: var(--purple-3);
-    --gradient-color-2: color-mix(
+    --g-3-light: var(--purple-5);
-      in srgb,
+    --g-4-dark: var(--crimson-3);
-      var(--blue-1),
+    --g-4-light: var(--crimson-5);
-      var(--blue-5) var(--p-2)
+    --g-5-dark: var(--tomato-3);
-    );
+    --g-5-light: var(--tomato-5);
-    --gradient-color-3: color-mix(
+
-      in srgb,
+    --g-1: color-mix(in srgb, var(--g-1-dark), var(--g-1-light) var(--p-1));
-      var(--purple-1),
+    --g-2: color-mix(in srgb, var(--g-2-dark), var(--g-2-light) var(--p-2));
-      var(--purple-5) var(--p-3)
+    --g-3: color-mix(in srgb, var(--g-3-dark), var(--g-3-light) var(--p-3));
-    );
+    --g-4: color-mix(in srgb, var(--g-4-dark), var(--g-4-light) var(--p-4));
+    --g-5: color-mix(in srgb, var(--g-5-dark), var(--g-5-light) var(--p-5));
 
     background: linear-gradient(
       45deg,
-      var(--gradient-color-1),
+      var(--g-1),
-      var(--gradient-color-2),
+      var(--g-2),
-      var(--gradient-color-3)
+      var(--g-3),
+      var(--g-4),
+      var(--g-5)
     );
   }
+
+  #home-hero[data-pride] {
+    --g-1-dark: var(--crimson-3);
+    --g-1-light: var(--crimson-5);
+    --g-2-dark: var(--orange-3);
+    --g-2-light: var(--orange-5);
+    --g-3-dark: var(--yellow-3);
+    --g-3-light: var(--yellow-5);
+    --g-4-dark: var(--blue-3);
+    --g-4-light: var(--blue-5);
+    --g-5-dark: var(--purple-3);
+    --g-5-light: var(--purple-5);
+  }
 </style>
 
 <script>
-  import { clamp } from 'lodash-es';
+  import { clamp, times } from 'lodash-es';
 
+  const n = 5;
   const homeHero = document.getElementById('home-hero');
 
   if (homeHero) {
-    window.addEventListener('pointermove', (event) => {
+    if (new Date().getMonth() === 5) {
-      const p = event.clientX / window.innerWidth;
+      homeHero.classList.add('data-pride');
-      const c = 1 - event.clientY / window.innerHeight;
+    }
-      const p1 = c * clamp(-2 * p + 1, 0, 1);
-      const p2 = c * clamp(-Math.abs(2 * p - 1) + 1, 0, 1);
-      const p3 = c * clamp(2 * p - 1, 0, 1);
 
-      homeHero.style.setProperty('--p-1', `${p1 * 100}%`);
+    window.addEventListener('pointermove', (event) => {
-      homeHero.style.setProperty('--p-2', `${p2 * 100}%`);
+      const x = event.clientX / window.innerWidth;
-      homeHero.style.setProperty('--p-3', `${p3 * 100}%`);
+      const c = clamp(
+        (1 -
+          (event.clientY + homeHero.getBoundingClientRect().top) /
+            window.innerHeight) **
+          2,
+        0,
+        1,
+      );
+
+      // https://www.desmos.com/calculator/ndz2poxk32
+      times(n, (i) => {
+        const p = c * clamp(-n * Math.abs(x - i / (n - 1)) + 1, 0, 3);
+        homeHero.style.setProperty(`--p-${i + 1}`, `${p * 100}%`);
+      });
     });
   }
 </script>