From 1c43eac49116e7bed0583499412b0e5d92641329 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Wed, 23 Oct 2024 14:02:06 +0200
Subject: [PATCH 01/33] feat(site): save progress

---
 site/src/components/ContainedSection.astro    |   2 +-
 site/src/components/Header.astro              |   2 +-
 .../components/sections/DeepDiveSection.astro |  26 +--
 site/src/components/sections/TopSection.astro |  27 ++-
 .../src/components/sections/WaveSection.astro |  23 +++
 .../sections/landing/BorderIntro.astro        | 159 +++---------------
 site/src/pages/ecosystem.astro                |  13 +-
 site/src/pages/index.astro                    |   4 +-
 site/src/pages/learn.astro                    |   6 +-
 site/src/pages/team.astro                     |  10 +-
 site/tailwind.config.ts                       |   3 +
 11 files changed, 95 insertions(+), 180 deletions(-)
 create mode 100644 site/src/components/sections/WaveSection.astro

diff --git a/site/src/components/ContainedSection.astro b/site/src/components/ContainedSection.astro
index 4347475431..78bcf15d2c 100644
--- a/site/src/components/ContainedSection.astro
+++ b/site/src/components/ContainedSection.astro
@@ -7,7 +7,7 @@ const { className } = Astro.props
 ---
 
 <section class=`flex w-full justify-center items-center ${className}`>
-  <div class="max-w-[1200px] w-full z-10 px-4 overflow-hidden">
+  <div class="max-w-[1440px] w-full z-10 px-4 overflow-hidden">
     <slot />
   </div>
 </section>
diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index c38d2389de..1725915fe9 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -60,7 +60,7 @@ const menuItems = [
 <header
   class="z-[100] w-full flex justify-around"
 >
-  <div class="max-w-[1200px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
+  <div class="max-w-[1440px] min-h-[68px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
     <a
       href="/"
       id="union-logo"
diff --git a/site/src/components/sections/DeepDiveSection.astro b/site/src/components/sections/DeepDiveSection.astro
index 8966ffbc9d..715e899a8f 100644
--- a/site/src/components/sections/DeepDiveSection.astro
+++ b/site/src/components/sections/DeepDiveSection.astro
@@ -1,10 +1,7 @@
 ---
 import { Image } from "astro:assets"
 import H1 from "../typography/h1.astro"
-import bubbles from "../../assets/images/spline-holders/bubbles.png"
 import smallWhale from "../../assets/images/whale.png"
-import Spline from "../Spline.astro"
-import trust from "../../assets/images/spline-holders/trust.png"
 import { renderRichText, renderTitle } from "../../lib/contentful/render.ts"
 
 const diver = [
@@ -22,14 +19,11 @@ const diver = [
 const { entries } = Astro.props
 ---
 
-<div class="flex justify-center  learn-gradient pb-24 text-lg font-mono" id="swim-container">
-  <Image src={bubbles} alt="bubbles"
-         class="absolute inset-0 w-full h-full object-cover object-center mix-blend-soft-light"></Image>
-
+<div class="flex justify-center py-24 text-lg font-mono" id="swim-container">
   <div class="relative grid grid-cols-4 gap-4 max-w-[1440px] px-6">
     <div class="flex flex-col col-span-full md:col-span-3 gap-12 md:gap-24 lg:gap-48">
 
-      <div>
+      <div id="">
         <H1>
           <Fragment set:html={renderTitle(entries.firstTitle)}/>
         </H1>
@@ -38,7 +32,7 @@ const { entries } = Astro.props
             <Fragment set:html={renderRichText(entries.firstText)}/>
           </div>
           <div class="object-contain h-auto w-full">
-            <Spline model={"https://prod.spline.design/4sixqZIrgH3JFR5H/scene.splinecode"} loading="eager"/>
+
           </div>
         </div>
       </div>
@@ -57,7 +51,7 @@ const { entries } = Astro.props
             <Fragment set:html={renderRichText(entries.thirdText)}/>
           </div>
           <div class="object-contain h-auto w-full">
-            <Spline model={"https://prod.spline.design/ekGIwYVP-nKgYf8O/scene.splinecode"} loading="eager"/>
+
           </div>
         </div>
       </div>
@@ -72,7 +66,7 @@ const { entries } = Astro.props
             <Fragment set:html={renderRichText(entries.fourthText)}/>
           </div>
           <div class="object-contain h-auto w-full w-max-[400px]">
-            <Spline model={"https://prod.spline.design/i1cLKOjQairx0xcM/scene.splinecode"} loading="eager"/>
+
           </div>
         </div>
       </div>
@@ -88,7 +82,7 @@ const { entries } = Astro.props
             </div>
           </div>
           <div class="object-contain  w-[300px]">
-            <Spline model={"https://prod.spline.design/I0VWm3Y5RdptPedN/scene.splinecode"} loading="eager"/>
+
           </div>
         </div>
       </div>
@@ -104,7 +98,7 @@ const { entries } = Astro.props
             </div>
           </div>
           <div class="object-contain h-auto w-full max-w-[386px]">
-            <Image src={trust} alt="union trust"/>
+
           </div>
         </div>
       </div>
@@ -146,7 +140,7 @@ const { entries } = Astro.props
     </div>
 
     <div class="relative col-span-1 hidden lg:block">
-      <div class="sticky top-24 p-4 pr-0">
+      <div class="sticky top-16 p-4 pr-0">
         <div class="flex gap-8 h-full justify-end font-mono">
           <div class="flex flex-col gap-6">
             {diver.map(item => (
@@ -203,15 +197,11 @@ const { entries } = Astro.props
 
 
   <style>
-      .learn-gradient {
-          background: linear-gradient(180deg, #000000 2%, #50767F 12%, #030711 39.08%, #000000 70.5%);
-      }
 
       .dive-gradient {
           background: linear-gradient(180deg, #FFFFFF 4%, #A0ECFD 7.13%, #030711 56%, #000000 100%);
       }
 
-
   </style>
 
 
diff --git a/site/src/components/sections/TopSection.astro b/site/src/components/sections/TopSection.astro
index fed11ba74a..a4bb9f258b 100644
--- a/site/src/components/sections/TopSection.astro
+++ b/site/src/components/sections/TopSection.astro
@@ -1,24 +1,19 @@
 ---
-import H2 from "../typography/h2.astro"
-const { title } = Astro.props
+import MatrixCover from "../MatrixCover.astro"
 ---
 
-<section class="relative flex w-full h-full justify-center pb-12 md:pb-34 -mt-[56px] md:-mt-[80px]">
-  <div class="absolute w-full max-w-[1440px] px-6 pt-24 md:pt-36 h-svh z-10">
-    <div class="pointer-events-none z-20 flex flex-col justify-between w-full h-full">
-      <div class="flex flex-col text-left items-start">
-        <H2>
-          <Fragment set:html={title} />
-        </H2>
-      </div>
+<div class="flex calc-h relative w-full">
+  <MatrixCover/>
+  <div class="absolute inset-0 flex justify-center w-full h-full">
+    <div class="w-full h-full max-w-[1440px] px-6">
       <slot />
     </div>
   </div>
-  <div class="h-svh w-full">
-    <!-- <SplineCover /> -->
-  </div>
-</section>
-
-
+</div>
 
+<style>
+  .calc-h {
+      height: calc(100svh - (68px));
+  }
+</style>
 
diff --git a/site/src/components/sections/WaveSection.astro b/site/src/components/sections/WaveSection.astro
new file mode 100644
index 0000000000..62bfcb1f05
--- /dev/null
+++ b/site/src/components/sections/WaveSection.astro
@@ -0,0 +1,23 @@
+---
+import MatrixCover from "../MatrixCover.astro"
+---
+
+<div class="relative grid h-svh">
+  <div class="bottom h-full w-full">
+    <MatrixCover/>
+  </div>
+  <div class="top w-full">
+
+  </div>
+</div>
+
+
+<style>
+    .top, .bottom {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+
+    .top {
+        z-index: 1;
+    }
+</style>
\ No newline at end of file
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 179f892eb3..bf555579ac 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -3,153 +3,50 @@ import MatrixCover from "../../MatrixCover.astro"
 import H1 from "../../typography/h1.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
-import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+import {renderRichText, renderTitle} from "../../../lib/contentful/render.ts"
 
 interface Props {
   title: any
   text: any
 }
 
-const { title, text } = Astro.props
+const {title, text} = Astro.props
 
 const titleHtml = renderTitle(title)
 const textHtml = renderRichText(text)
 ---
 
-  <div class="header-grid">
-    <!--SCREW -->
-    <!-- <div class="screw bg-neutral-800 rounded-full w-6 h-6 absolute top-0 right-0 z-20 flex items-center justify-center">
-      <div class="absolute w-7 h-1 bg-black rotate-45"></div>
-    </div> -->
-    <div class="shiny-border" id="glowContainer">
-    </div>
-    <MatrixCover/>
-    <div class="backdrop-blur-2xl max-w-2xl header-text-content p-4 md:p-8 flex flex-col gap-4 m-4">
-      <H1><Fragment set:html={titleHtml} /></H1>
-      <QuoteSubTitle><Fragment set:html={textHtml} /></QuoteSubTitle>
-      <ButtonA href="https://app.union.build">DIVE IN </ButtonA>
-    </div>
-
-    <!--CLIPPED CONTAINER-->
-    <!-- <div class="clipped-container flex overflow-hidden stack h-full" id="glowContainer">
-      <div class="glow -z-10"></div>
-      <div class="content bg-black">
-      </div>
-      <div class="flex absolute z-10">
-        <div class="backdrop-blur-2xl p-8 flex flex-col gap-4">
-          <H1>The Modular ZK<br> <span class="text-accent-500">Interop Layer</span></H1>
-          <QuoteSubTitle>
-            Connecting every blockchain, without compromising on security, efficiency,
-            decentralization, or speed.
-         </QuoteSubTitle>
-          <ButtonA href="https://app.union.build">DIVE IN </ButtonA>
-       </div>
-      </div>
-    </div> -->
-
-    <!--SCREW -->
-    <!-- <div id="screw"
-         class="screw bg-neutral-800 mb-4 rounded-full w-6 h-6 absolute bottom-0 left-0 z-20 flex items-center justify-center transition-colors duration-200">
-      <div class="absolute w-7 h-1 bg-black rotate-45"></div>
-    </div> -->
-    
+<div class="header-grid">
+  <MatrixCover/>
+  <div class="backdrop-blur-2xl max-w-2xl header-text-content p-4 md:p-8 flex flex-col gap-4 m-4">
+    <H1>
+      <Fragment set:html={titleHtml}/>
+    </H1>
+    <QuoteSubTitle>
+      <Fragment set:html={textHtml}/>
+    </QuoteSubTitle>
+    <ButtonA href="https://app.union.build">DIVE IN</ButtonA>
   </div>
+</div>
 
 <style lang="postcss" is:global>
-  .header-grid {
-    --outer-border: 8px;
-    --inner-border: 2px;
-    height: calc(100svh - var(--header-height));
-    width: full;
-    display: grid;
-    grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
-    grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
-  }
-
-  .shiny-border {
-    background-color: theme(colors.neutral.800); 
-    grid-area: 2 / 2 / 7 / 7;
-  }
-  .header-grid > canvas {
-    grid-area: 3 / 3 / 6 / 6;
-    background-color: black;
-  }
-
-  .header-text-content {
-    grid-area: 4 / 4 / 5 / 5;
-  }
-
-    .clipped-container {
-        position: relative;
-        width: 100%;
-        padding: 2px;
-        background-color: theme(colors.black);
-        clip-path: polygon(
-                0 0,
-                calc(100% - 75px) 0,
-                100% 75px,
-                100% 100%,
-                75px 100%,
-                0 calc(100% - 75px)
-        );
-        overflow: hidden;
+    .header-grid {
+        --outer-border: 0px;
+        --inner-border: 0px;
+        height: calc(100svh - var(--header-height));
+        width: full;
+        display: grid;
+        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
     }
 
-    .content {
-        width: 100%;
-        background-color: transparent;
-        clip-path: polygon(
-                1px 1px,
-                calc(100% - 75px) 1px,
-                calc(100% - 1px) 75px,
-                calc(100% - 1px) calc(100% - 1px),
-                75px calc(100% - 1px),
-                1px calc(100% - 75px)
-        );
-        position: relative;
-        z-index: 1;
-    }
-    .glow {
-        position: absolute;
-        width: 500px;
-        height: 500px;
-        background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
-        border-radius: 50%;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        z-index: 2;
+    .header-grid > canvas {
+        grid-area: 3 / 3 / 6 / 6;
+        background-color: black;
     }
-</style>
 
-<script>
-  const container = document.getElementById('glowContainer');
-  const glow = container.querySelector('.glow');
-  let isMouseOver = false;
-
-  document.addEventListener('mousemove', (e) => {
-    isMouseOver = true;
-    updateGlowPosition(e);
-  });
-
-  document.addEventListener('mouseleave', () => {
-    isMouseOver = false;
-    glow.style.opacity = '0';
-  });
-
-  function updateGlowPosition(e) {
-    const rect = container.getBoundingClientRect();
-    const x = e.clientX - rect.left - 250; // 75 is half the width of the glow
-    const y = e.clientY - rect.top - 250; // 75 is half the height of the glow
-
-    glow.style.left = `${x}px`;
-    glow.style.top = `${y}px`;
-    glow.style.opacity = '1';
-
-    // Check proximity to edges
-    const proximity = 50; // Adjust this value to change how close to the edge the effect starts
-    const isNearEdge = x < proximity || y < proximity ||
-      x > rect.width - proximity || y > rect.height - proximity;
+    .header-text-content {
+        grid-area: 4 / 4 / 5 / 5;
+    }
 
-  }
-</script>
+</style>
diff --git a/site/src/pages/ecosystem.astro b/site/src/pages/ecosystem.astro
index bb84c8a4fe..0d9a12e72c 100644
--- a/site/src/pages/ecosystem.astro
+++ b/site/src/pages/ecosystem.astro
@@ -1,8 +1,17 @@
 ---
 import SectionsLayout from "../layouts/SectionsLayout.astro"
 import EcosystemSection from "../components/sections/EcosystemSection.astro"
+import TopSection from "../components/sections/TopSection.astro"
+import {renderRichText} from "../lib/contentful/render";
 ---
 
-<SectionsLayout  title="Ecosystem">
-    <EcosystemSection />
+<SectionsLayout title="Ecosystem">
+  <TopSection>
+    <div class="flex flex-col justify-center h-full py-16">
+      <div class="md:text-5xl font-mono uppercase text-center">
+        Connecting projects, people, and products into a <span class="text-accent-500">unified organism of interoperability.</span>
+      </div>
+    </div>
+  </TopSection>
+  <EcosystemSection/>
 </SectionsLayout>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 5703859b01..bc8d214f82 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -106,8 +106,8 @@ try {
                     text={landingData.fourthText}
             />
             <ContainedSection>
-              <MarqueeSection title={"Our pod."} reverse={false} data={pods}/>
-              <MarqueeSection title={"Our partners."} reverse={true} data={partners}/>
+              <MarqueeSection title={"Our pod."} reverse={false} data={pods} />
+              <MarqueeSection title={"Our partners."} reverse={true} data={partners} />
             </ContainedSection>
           </>
   ) : (
diff --git a/site/src/pages/learn.astro b/site/src/pages/learn.astro
index 3b9d7dce23..75dc8b7765 100644
--- a/site/src/pages/learn.astro
+++ b/site/src/pages/learn.astro
@@ -18,7 +18,7 @@ try {
   if (landingEntries.items.length > 0) {
     learningData = landingEntries.items[0].fields
   } else {
-    error = "No landing page data found."
+    error = "No learning page data found."
   }
 } catch (err) {
   console.error("Error fetching Contentful data:", err)
@@ -26,7 +26,7 @@ try {
 }
 ---
 
-<SectionsLayout gapless>
+<SectionsLayout title="Learn" gapless>
   {error ? (
           <div class="error-message">
             <h2>Error</h2>
@@ -34,7 +34,7 @@ try {
           </div>
   ) : learningData ? (
           <TopSection title={renderTitle(learningData.coverTitle)}>
-            <div class="flex flex-col text-center gap-8">
+            <div class="flex flex-col items-center justify-center h-full text-center gap-8">
               <div class="md:text-5xl font-mono uppercase">
                 <Fragment set:html={renderRichText(learningData.coverText)}/>
               </div>
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index fa168229b7..5f33b59495 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -18,6 +18,7 @@ import team_spearbit from "#/assets/images/partners/spearbit.svg"
 import team_groomlake from "#/assets/images/partners/groomlake.png"
 import team_horizons from "#/assets/images/partners/horizons.svg"
 import ContainedSection from "../components/ContainedSection.astro"
+import H1 from "../components/typography/h1.astro"
 
 const teams = [
   {
@@ -112,13 +113,10 @@ try {
           </div>
   ) : teamData ? (
           <>
-            <TopSection title="Union team">
-              <div class="flex flex-col text-center gap-8">
-                <p class="md:text-4xl font-mono uppercase">Our team is a <span class="text-accent-500">global</span> network of
-                  professionals, working to build
-                  the <span class="text-accent-500">interoperability future.</span></p>
+            <TopSection>
+              <div class="flex h-full w-full items-center justify-center">
+                <H1>Meet the team</H1>
               </div>
-              <div></div>
             </TopSection>
 
             <ContainedSection>
diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts
index 061726a197..a244f72b79 100644
--- a/site/tailwind.config.ts
+++ b/site/tailwind.config.ts
@@ -18,6 +18,9 @@ export default {
       screens: {
         xs: "320px"
       },
+      height: {
+        "screen-minus-header": "calc(100svh - var(--header-height))"
+      },
       fontSize: {
         // this exists as `*-base` but `*-md` is more intuitive
         md: [

From fc914f15b0f5e6f9cd100b80518e1a43711ac438 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Thu, 24 Oct 2024 13:27:15 +0200
Subject: [PATCH 02/33] fix(site): cleaner

---
 site/src/components/sections/DeepDiveSection.astro     | 8 --------
 site/src/components/sections/landing/BorderIntro.astro | 4 ++--
 site/src/pages/ecosystem.astro                         | 2 +-
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/site/src/components/sections/DeepDiveSection.astro b/site/src/components/sections/DeepDiveSection.astro
index 715e899a8f..49f2ee78be 100644
--- a/site/src/components/sections/DeepDiveSection.astro
+++ b/site/src/components/sections/DeepDiveSection.astro
@@ -152,13 +152,6 @@ const { entries } = Astro.props
           <div class="flex dive-gradient h-auto min-w-7 relative" id="swim-lane">
             <Image id="scrolling-dot" src={smallWhale} alt="small whale" class="absolute w-10"></Image>
           </div>
-          <div class="flex flex-col gap-6 font-mono text-lg">
-            {diver.map(item => (
-                    <div class="h-16 flex items-center">
-                      <p class="text-2xl">{item.meter}</p>
-                    </div>
-            ))}
-          </div>
         </div>
       </div>
     </div>
@@ -190,7 +183,6 @@ const { entries } = Astro.props
       const maxDotPosition = swimlaneHeight - dot.offsetHeight;
       const newTop = scrollPercentage * maxDotPosition;
 
-      // Set the dot's top position
       dot.style.top = `${newTop}px`;
     });
   </script>
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index bf555579ac..6fd6d273d9 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -3,14 +3,14 @@ import MatrixCover from "../../MatrixCover.astro"
 import H1 from "../../typography/h1.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
-import {renderRichText, renderTitle} from "../../../lib/contentful/render.ts"
+import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
 
 interface Props {
   title: any
   text: any
 }
 
-const {title, text} = Astro.props
+const { title, text } = Astro.props
 
 const titleHtml = renderTitle(title)
 const textHtml = renderRichText(text)
diff --git a/site/src/pages/ecosystem.astro b/site/src/pages/ecosystem.astro
index 0d9a12e72c..171f6ec5f7 100644
--- a/site/src/pages/ecosystem.astro
+++ b/site/src/pages/ecosystem.astro
@@ -2,7 +2,7 @@
 import SectionsLayout from "../layouts/SectionsLayout.astro"
 import EcosystemSection from "../components/sections/EcosystemSection.astro"
 import TopSection from "../components/sections/TopSection.astro"
-import {renderRichText} from "../lib/contentful/render";
+import { renderRichText } from "../lib/contentful/render"
 ---
 
 <SectionsLayout title="Ecosystem">

From 8c0b0d2b508cefa0f3382c9e3b6053a5a5c3711b Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Thu, 24 Oct 2024 14:25:44 +0200
Subject: [PATCH 03/33] fix(site): lint

---
 site/src/pages/ecosystem.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/pages/ecosystem.astro b/site/src/pages/ecosystem.astro
index 171f6ec5f7..ed60f5f45a 100644
--- a/site/src/pages/ecosystem.astro
+++ b/site/src/pages/ecosystem.astro
@@ -2,7 +2,6 @@
 import SectionsLayout from "../layouts/SectionsLayout.astro"
 import EcosystemSection from "../components/sections/EcosystemSection.astro"
 import TopSection from "../components/sections/TopSection.astro"
-import { renderRichText } from "../lib/contentful/render"
 ---
 
 <SectionsLayout title="Ecosystem">

From 227c4d05045da8863c579df2731ae4ae7d1a219d Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Fri, 25 Oct 2024 17:21:48 +0200
Subject: [PATCH 04/33] fix(site): save progress

---
 site/src/components/Header.astro              | 20 +++--
 site/src/components/MatrixCover.astro         |  3 +-
 .../components/sections/DeepDiveSection.astro |  1 +
 .../sections/landing/BorderIntro.astro        | 82 ++++++++++++++----
 site/src/layouts/AnimationLayout.astro        | 21 +++++
 site/src/lib/matrix-cover.ts                  | 85 +++++++++++++++----
 site/src/pages/ecosystem.astro                | 15 ++--
 site/src/pages/index.astro                    | 12 +--
 site/src/pages/learn.astro                    | 14 +--
 9 files changed, 181 insertions(+), 72 deletions(-)
 create mode 100644 site/src/layouts/AnimationLayout.astro

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 1725915fe9..06b8ad342c 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -5,22 +5,26 @@ const menuItems = [
   {
     url: "/learn",
     name: "learn",
-    highlight: false
-  },
-  {
-    url: "https://docs.union.build/",
-    name: "build",
-    highlight: false
+    highlight: false,
+    external: false
   },
   {
     url: "/ecosystem",
     name: "ecosystem",
-    highlight: false
+    highlight: false,
+    external: false
+  },
+  {
+    url: "https://docs.union.build/",
+    name: "docs",
+    highlight: false,
+    external: true
   },
   {
     url: "https://app.union.build",
     name: "testnet",
-    highlight: false
+    highlight: false,
+    external: true
   }
 ]
 ---
diff --git a/site/src/components/MatrixCover.astro b/site/src/components/MatrixCover.astro
index 4f7e294a20..916f0b9204 100644
--- a/site/src/components/MatrixCover.astro
+++ b/site/src/components/MatrixCover.astro
@@ -2,5 +2,6 @@
 // WaveCubes.astro
 ---
 <!-- inline style is to prevent white flash on slow internet !-->
-<canvas style="background-color: black;" class="matrix-cover w-full h-full block" id="waveCanvas" width="3840" height="2160"></canvas>
+<canvas style="background-color: black;" class="matrix-cover w-full h-full block" id="waveCanvas" width="3840"
+        height="2160" transition:persist></canvas>
 <script src="../lib/matrix-cover.ts"/>
diff --git a/site/src/components/sections/DeepDiveSection.astro b/site/src/components/sections/DeepDiveSection.astro
index 49f2ee78be..99d233a7a7 100644
--- a/site/src/components/sections/DeepDiveSection.astro
+++ b/site/src/components/sections/DeepDiveSection.astro
@@ -19,6 +19,7 @@ const diver = [
 const { entries } = Astro.props
 ---
 
+
 <div class="flex justify-center py-24 text-lg font-mono" id="swim-container">
   <div class="relative grid grid-cols-4 gap-4 max-w-[1440px] px-6">
     <div class="flex flex-col col-span-full md:col-span-3 gap-12 md:gap-24 lg:gap-48">
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 6fd6d273d9..618a7374db 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -1,31 +1,45 @@
 ---
 import MatrixCover from "../../MatrixCover.astro"
 import H1 from "../../typography/h1.astro"
-import ButtonA from "../../ButtonA.astro"
-import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
-import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+import TextP from "../../typography/TextP.astro"
+// import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
 
 interface Props {
-  title: any
-  text: any
+  title: string
+  text: string
 }
 
 const { title, text } = Astro.props
 
-const titleHtml = renderTitle(title)
-const textHtml = renderRichText(text)
+// const titleHtml = renderTitle(title)
+// const textHtml = renderRichText(text)
+
+// Define custom animation
+const slideTextAnimation = {
+  forwards: {
+    old: {
+      name: "slideOutLeft",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    },
+    new: {
+      name: "slideInRight",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    }
+  }
+}
 ---
 
 <div class="header-grid">
   <MatrixCover/>
-  <div class="backdrop-blur-2xl max-w-2xl header-text-content p-4 md:p-8 flex flex-col gap-4 m-4">
-    <H1>
-      <Fragment set:html={titleHtml}/>
-    </H1>
-    <QuoteSubTitle>
-      <Fragment set:html={textHtml}/>
-    </QuoteSubTitle>
-    <ButtonA href="https://app.union.build">DIVE IN</ButtonA>
+  <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
+    <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
+      <H1>{title}</H1>
+      <TextP>{text}</TextP>
+    </div>
   </div>
 </div>
 
@@ -33,8 +47,8 @@ const textHtml = renderRichText(text)
     .header-grid {
         --outer-border: 0px;
         --inner-border: 0px;
-        height: calc(100svh - var(--header-height));
-        width: full;
+        height: calc(100svh - 68px);
+        width: 100%;
         display: grid;
         grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
         grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
@@ -46,7 +60,39 @@ const textHtml = renderRichText(text)
     }
 
     .header-text-content {
-        grid-area: 4 / 4 / 5 / 5;
+        grid-area: 4 / 3 / 5 / 6;
+        z-index: 1;
+    }
+
+
+    @keyframes slideOutLeft {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
     }
 
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
+
+<script>
+
+  import {rotateCamera} from "../../../lib/matrix-cover";
+
+  document.addEventListener('astro:after-swap', () => {
+    rotateCamera('right')
+  })
+</script>
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
new file mode 100644
index 0000000000..e69c204d10
--- /dev/null
+++ b/site/src/layouts/AnimationLayout.astro
@@ -0,0 +1,21 @@
+---
+import BorderIntro from "../components/sections/landing/BorderIntro.astro"
+import { ViewTransitions } from "astro:transitions"
+
+interface Props {
+  title: any
+  text: any
+}
+
+const { title, text } = Astro.props
+---
+
+<head>
+  <ViewTransitions/>
+</head>
+
+<BorderIntro {title} {text}/>
+<div class="relative">
+  <slot/>
+</div>
+
diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index 2529477600..c53c5bb2cc 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -1,6 +1,59 @@
 import * as glMatrix from "gl-matrix"
 
-let state: "start" | "rotating" | "main"
+type OrbitDirection = "left" | "right"
+
+interface AnimationState {
+  currentRotation: number
+  targetRotation: number
+  isTransitioning: boolean
+  transitionStartTime: number
+  transitionDuration: number
+  totalRotation: number
+  lastTargetRotation: number
+}
+
+let state: AnimationState = {
+  currentRotation: 0,
+  targetRotation: 0,
+  isTransitioning: false,
+  transitionStartTime: 0,
+  transitionDuration: 1000,
+  totalRotation: 0,
+  lastTargetRotation: 0
+}
+
+function startRotationTransition(angle: number) {
+  if (state.isTransitioning) {
+    state.totalRotation += angle
+    state.targetRotation = state.totalRotation
+    state.transitionStartTime = performance.now()
+    return
+  }
+
+  state.isTransitioning = true
+  state.transitionStartTime = performance.now()
+  state.totalRotation = state.currentRotation + angle
+  state.targetRotation = state.totalRotation
+}
+
+function updateRotation(now: number) {
+  if (!state.isTransitioning) return state.currentRotation
+
+  const elapsed = now - state.transitionStartTime
+  const progress = Math.min(elapsed / state.transitionDuration, 1)
+
+  const eased = progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2
+
+  const newRotation = state.currentRotation + (state.targetRotation - state.currentRotation) * eased
+
+  if (progress >= 1) {
+    state.isTransitioning = false
+    state.currentRotation = state.targetRotation
+    state.lastTargetRotation = state.targetRotation
+  }
+
+  return newRotation
+}
 
 let canvas: HTMLCanvasElement
 let mouseX = 0
@@ -295,7 +348,6 @@ function initWebGL() {
     return noiseValue * amplitude
   }
 
-  // Draw scene
   function drawScene(gl, programInfo, buffers, cubePositions, totalTime) {
     gl.viewport(0, 0, displayWidth, displayHeight)
     gl.clearColor(0.0, 0.0, 0.0, 1.0)
@@ -305,7 +357,8 @@ function initWebGL() {
 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
 
-    const fieldOfView = (50 * Math.PI) / 180
+    // Adjusted field of view for better perspective
+    const fieldOfView = (45 * Math.PI) / 180 // Changed from 50 to 45 degrees
     const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
     const zNear = 0.1
     const zFar = 100.0
@@ -315,26 +368,19 @@ function initWebGL() {
 
     const modelViewMatrix = glMatrix.mat4.create()
 
-    // mouseX -= 0.05;
-    // mouseY -= 0.05;
-
     // Smooth out mouse movement
     mouseX += (targetMouseX - mouseX) * 0.1
     mouseY += (targetMouseY - mouseY) * 0.1
 
-    // glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, [-10, 0, 0])
-
-    // glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, 0]);
-    glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -16])
-    // glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, Math.PI / 2, [1, 0, 0]);
-    // glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, -Math.PI / 4, [0, 1, 0]);
-
-    // Current time since the animation started (you need to define how you get this)
+    glMatrix.mat4.lookAt(modelViewMatrix, [0, 20, -15], [0, -2, 0], [0, 1, 0])
 
-    // Normalize time to a value between 0 and 1
+    // Apply rotations
+    const currentRotation = updateRotation(totalTime * 1000)
+    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, currentRotation, [0, 1, 0])
 
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, endRotationY + mouseY * 0.05, [1, 0, 0])
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, -endRotationX + mouseX * 0.05, [0, 1, 0])
+    // Reduced mouse movement sensitivity
+    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseY * 0.03, [1, 0, 0])
+    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseX * 0.03, [0, 1, 0])
 
     // Set up attribute buffers
     {
@@ -499,5 +545,10 @@ function initWebGL() {
   }
 }
 
+export function rotateCamera(direction: OrbitDirection) {
+  const angle = direction === "right" ? Math.PI / 2 : -Math.PI / 2
+  startRotationTransition(angle)
+}
+
 // Initialize WebGL when the component mounts
 document.addEventListener("DOMContentLoaded", initWebGL)
diff --git a/site/src/pages/ecosystem.astro b/site/src/pages/ecosystem.astro
index ed60f5f45a..c5bc18d1db 100644
--- a/site/src/pages/ecosystem.astro
+++ b/site/src/pages/ecosystem.astro
@@ -1,16 +1,11 @@
 ---
 import SectionsLayout from "../layouts/SectionsLayout.astro"
 import EcosystemSection from "../components/sections/EcosystemSection.astro"
-import TopSection from "../components/sections/TopSection.astro"
+import AnimationLayout from "../layouts/AnimationLayout.astro"
 ---
 
-<SectionsLayout title="Ecosystem">
-  <TopSection>
-    <div class="flex flex-col justify-center h-full py-16">
-      <div class="md:text-5xl font-mono uppercase text-center">
-        Connecting projects, people, and products into a <span class="text-accent-500">unified organism of interoperability.</span>
-      </div>
-    </div>
-  </TopSection>
-  <EcosystemSection/>
+<SectionsLayout gapless>
+  <AnimationLayout title="Ecosystem" text="Connecting projects, people, and products into a unified organism of interoperability.">
+    <EcosystemSection/>
+  </AnimationLayout>
 </SectionsLayout>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index bc8d214f82..e9174d1399 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -31,7 +31,7 @@ import partner_polygon from "#/assets/images/marquee/partners/polygon.png"
 import partner_movement from "#/assets/images/marquee/partners/movement.png"
 import partner_bera from "#/assets/images/marquee/partners/bera.png"
 import partner_arbitrum from "#/assets/images/marquee/partners/arbitrum.png"
-import BorderIntro from "../components/sections/landing/BorderIntro.astro"
+import AnimationLayout from "../layouts/AnimationLayout.astro"
 
 export const prerender = false
 
@@ -81,18 +81,14 @@ try {
 }
 ---
 
-<SectionsLayout>
+<SectionsLayout title="Union">
   {error ? (
           <div class="error-message">
             <h2>Error</h2>
             <p>{error}</p>
           </div>
   ) : landingData ? (
-          <>
-            <BorderIntro
-                    title={landingData.firstTitle}
-                    text={landingData.firstText}
-            />
+          <AnimationLayout title="Join the union" text="The next generation of aggregation, interoperability, and chain abstraction.">
             <ConsensusSection
                     title={landingData.secondTitle}
                     text={landingData.secondText}
@@ -109,7 +105,7 @@ try {
               <MarqueeSection title={"Our pod."} reverse={false} data={pods} />
               <MarqueeSection title={"Our partners."} reverse={true} data={partners} />
             </ContainedSection>
-          </>
+          </AnimationLayout>
   ) : (
           <div class="loading-message">
             <p>Loading content...</p>
diff --git a/site/src/pages/learn.astro b/site/src/pages/learn.astro
index 75dc8b7765..402fa5eca7 100644
--- a/site/src/pages/learn.astro
+++ b/site/src/pages/learn.astro
@@ -5,6 +5,7 @@ import DeepDiveSection from "../components/sections/DeepDiveSection.astro"
 import { contentfulClient } from "../lib/contentful/client.ts"
 import { renderRichText, renderTitle } from "../lib/contentful/render.ts"
 import type { LearningPageFields } from "../lib/contentful/types.ts"
+import AnimationLayout from "../layouts/AnimationLayout.astro"
 
 export const prerender = false
 
@@ -33,16 +34,9 @@ try {
             <p>{error}</p>
           </div>
   ) : learningData ? (
-          <TopSection title={renderTitle(learningData.coverTitle)}>
-            <div class="flex flex-col items-center justify-center h-full text-center gap-8">
-              <div class="md:text-5xl font-mono uppercase">
-                <Fragment set:html={renderRichText(learningData.coverText)}/>
-              </div>
-              <p class="rotate-90 text-5xl">{'>>>'}</p>
-            </div>
-            <div></div>
-          </TopSection>
-          <DeepDiveSection entries={learningData} />
+          <AnimationLayout title="Learn" text="Connecting projects, people, and products into a unified organism of interoperability.">
+            <DeepDiveSection entries={learningData} />
+          </AnimationLayout>
   ) : (
           <div class="loading-message">
             <p>Loading content...</p>

From 4a49f0f308d016f4ff935580babc9eca4b0643c2 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Fri, 25 Oct 2024 17:59:40 +0200
Subject: [PATCH 05/33] fix(site): save progress

---
 .../sections/landing/BorderIntro.astro        | 33 +++++++++++++++++--
 site/src/lib/matrix-cover.ts                  |  4 +--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 618a7374db..ebb0a8e7df 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -92,7 +92,34 @@ const slideTextAnimation = {
 
   import {rotateCamera} from "../../../lib/matrix-cover";
 
-  document.addEventListener('astro:after-swap', () => {
-    rotateCamera('right')
-  })
+  let previousPath = window.location.pathname;
+
+  document.addEventListener('astro:after-swap', (e) => {
+    const currentPath = window.location.pathname;
+
+    const pageValues = {
+      '/': 1,
+      '/learn': 2,
+      '/ecosystem': 3,
+      '/team': 4
+    };
+
+    const fromPath = previousPath.replace(/\/$/, '') || '/';
+    const toPath = currentPath.replace(/\/$/, '') || '/';
+
+    console.log('From:', fromPath, 'To:', toPath);
+
+    const fromValue = pageValues[fromPath];
+    const toValue = pageValues[toPath];
+
+    if (fromValue !== undefined && toValue !== undefined) {
+      const direction = Math.abs(toValue - fromValue) > 2
+        ? (toValue < fromValue ? 'left' : 'right')
+        : (toValue > fromValue ? 'left' : 'right');
+
+      rotateCamera(direction);
+    }
+    previousPath = currentPath;
+  });
+
 </script>
diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index c53c5bb2cc..64d549e1a1 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -379,8 +379,8 @@ function initWebGL() {
     glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, currentRotation, [0, 1, 0])
 
     // Reduced mouse movement sensitivity
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseY * 0.03, [1, 0, 0])
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseX * 0.03, [0, 1, 0])
+    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseY * 0.05, [1, 0, 0])
+    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseX * 0.05, [0, 1, 0])
 
     // Set up attribute buffers
     {

From 20861aa199c4822d0299f72b80802d5c1ad131c8 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 10:59:02 +0100
Subject: [PATCH 06/33] fix(site): 45 degree

---
 site/src/lib/matrix-cover.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index 64d549e1a1..701ca34566 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -13,13 +13,13 @@ interface AnimationState {
 }
 
 let state: AnimationState = {
-  currentRotation: 0,
-  targetRotation: 0,
+  currentRotation: Math.PI / 4,
+  targetRotation: Math.PI / 4,
   isTransitioning: false,
   transitionStartTime: 0,
   transitionDuration: 1000,
-  totalRotation: 0,
-  lastTargetRotation: 0
+  totalRotation: Math.PI / 4,
+  lastTargetRotation: Math.PI / 4
 }
 
 function startRotationTransition(angle: number) {
@@ -358,7 +358,7 @@ function initWebGL() {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
 
     // Adjusted field of view for better perspective
-    const fieldOfView = (45 * Math.PI) / 180 // Changed from 50 to 45 degrees
+    const fieldOfView = (45 * Math.PI) / 180
     const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
     const zNear = 0.1
     const zFar = 100.0

From f20f110d42768d04eafc9ab834a4f8e89bc5dfac Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 15:32:05 +0100
Subject: [PATCH 07/33] fix(site): save changes

---
 .../components/sections/DeepDiveSection.astro | 40 ++++++++++---------
 .../sections/landing/BorderIntro.astro        | 28 +------------
 site/src/pages/learn.astro                    |  1 -
 site/src/pages/team.astro                     | 11 ++---
 4 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/site/src/components/sections/DeepDiveSection.astro b/site/src/components/sections/DeepDiveSection.astro
index 99d233a7a7..acbc422de8 100644
--- a/site/src/components/sections/DeepDiveSection.astro
+++ b/site/src/components/sections/DeepDiveSection.astro
@@ -160,32 +160,34 @@ const { entries } = Astro.props
   </div>
 
   <script>
-    const dot = document.getElementById('scrolling-dot');
-    const container = document.getElementById('swim-container');
-    const swimlane = document.getElementById('swim-lane');
+    document.addEventListener('astro:page-load', () => {
+      const dot = document.getElementById('scrolling-dot');
+      const container = document.getElementById('swim-container');
+      const swimlane = document.getElementById('swim-lane');
 
-    window.addEventListener('scroll', () => {
-      const containerRect = container.getBoundingClientRect();
-      const swimlaneRect = swimlane.getBoundingClientRect();
+      window.addEventListener('scroll', () => {
+        const containerRect = container.getBoundingClientRect();
+        const swimlaneRect = swimlane.getBoundingClientRect();
 
-      const containerTop = containerRect.top;
-      const containerBottom = containerRect.bottom;
-      const containerHeight = containerRect.height;
+        const containerTop = containerRect.top;
+        const containerBottom = containerRect.bottom;
+        const containerHeight = containerRect.height;
 
-      const swimlaneHeight = swimlaneRect.height;
+        const swimlaneHeight = swimlaneRect.height;
 
-      // Calculate how much the container is scrolled
-      const scrollPosition = Math.max(0, Math.min(containerHeight, window.innerHeight - containerTop));
+        // Calculate how much the container is scrolled
+        const scrollPosition = Math.max(0, Math.min(containerHeight, window.innerHeight - containerTop));
 
-      // Calculate the scroll percentage relative to the container's height
-      const scrollPercentage = scrollPosition / containerHeight;
+        // Calculate the scroll percentage relative to the container's height
+        const scrollPercentage = scrollPosition / containerHeight;
 
-      // Calculate the new top position of the dot within the swimlane
-      const maxDotPosition = swimlaneHeight - dot.offsetHeight;
-      const newTop = scrollPercentage * maxDotPosition;
+        // Calculate the new top position of the dot within the swimlane
+        const maxDotPosition = swimlaneHeight - dot.offsetHeight;
+        const newTop = scrollPercentage * maxDotPosition;
 
-      dot.style.top = `${newTop}px`;
-    });
+        dot.style.top = `${newTop}px`;
+      });
+    })
   </script>
 
 
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index ebb0a8e7df..0319155b46 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -89,37 +89,11 @@ const slideTextAnimation = {
 </style>
 
 <script>
-
   import {rotateCamera} from "../../../lib/matrix-cover";
 
   let previousPath = window.location.pathname;
 
   document.addEventListener('astro:after-swap', (e) => {
-    const currentPath = window.location.pathname;
-
-    const pageValues = {
-      '/': 1,
-      '/learn': 2,
-      '/ecosystem': 3,
-      '/team': 4
-    };
-
-    const fromPath = previousPath.replace(/\/$/, '') || '/';
-    const toPath = currentPath.replace(/\/$/, '') || '/';
-
-    console.log('From:', fromPath, 'To:', toPath);
-
-    const fromValue = pageValues[fromPath];
-    const toValue = pageValues[toPath];
-
-    if (fromValue !== undefined && toValue !== undefined) {
-      const direction = Math.abs(toValue - fromValue) > 2
-        ? (toValue < fromValue ? 'left' : 'right')
-        : (toValue > fromValue ? 'left' : 'right');
-
-      rotateCamera(direction);
-    }
-    previousPath = currentPath;
+    rotateCamera('left');
   });
-
 </script>
diff --git a/site/src/pages/learn.astro b/site/src/pages/learn.astro
index 402fa5eca7..7155c15ef0 100644
--- a/site/src/pages/learn.astro
+++ b/site/src/pages/learn.astro
@@ -1,5 +1,4 @@
 ---
-import TopSection from "../components/sections/TopSection.astro"
 import SectionsLayout from "../layouts/SectionsLayout.astro"
 import DeepDiveSection from "../components/sections/DeepDiveSection.astro"
 import { contentfulClient } from "../lib/contentful/client.ts"
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 5f33b59495..5b1f9cdce0 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -19,6 +19,7 @@ import team_groomlake from "#/assets/images/partners/groomlake.png"
 import team_horizons from "#/assets/images/partners/horizons.svg"
 import ContainedSection from "../components/ContainedSection.astro"
 import H1 from "../components/typography/h1.astro"
+import AnimationLayout from "../layouts/AnimationLayout.astro"
 
 const teams = [
   {
@@ -112,13 +113,7 @@ try {
             <p>{error}</p>
           </div>
   ) : teamData ? (
-          <>
-            <TopSection>
-              <div class="flex h-full w-full items-center justify-center">
-                <H1>Meet the team</H1>
-              </div>
-            </TopSection>
-
+          <AnimationLayout title="Meet the team" text="Our team is a global network of professionals, working to build the interoperability future.">
             <ContainedSection>
               <div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
                 {teamData.map((person) => (
@@ -146,7 +141,7 @@ try {
                 ))}
               </div>
             </ContainedSection>
-          </>
+          </AnimationLayout>
   ) : (
           <div class="loading-message">
             <p>Loading content...</p>

From 2177f121c60cc13aa3f5da7b2eb7daf817519b64 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 15:52:37 +0100
Subject: [PATCH 08/33] feat(site): add external icon

---
 site/src/components/ExternalLinkIcon.astro | 12 ++++++++++++
 site/src/components/Header.astro           |  7 +++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/ExternalLinkIcon.astro

diff --git a/site/src/components/ExternalLinkIcon.astro b/site/src/components/ExternalLinkIcon.astro
new file mode 100644
index 0000000000..2b2a892eba
--- /dev/null
+++ b/site/src/components/ExternalLinkIcon.astro
@@ -0,0 +1,12 @@
+---
+interface Props {
+  class: string
+}
+
+const { class: className } = Astro.props
+---
+
+<svg viewBox="0 0 24 24" class=`${className ? className : "size-4"}`>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+</svg>
\ No newline at end of file
diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 06b8ad342c..300b0bce46 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -1,6 +1,7 @@
 ---
 import unionLogo from "#/assets/union-logo/logo.svg"
 import { Icon } from "astro-icon/components"
+import ExternalLinkIcon from "./ExternalLinkIcon.astro";
 const menuItems = [
   {
     url: "/learn",
@@ -102,11 +103,12 @@ const menuItems = [
                 <a
                     href={menuItem.url}
                     class:list={[
-                      "text-normal flex flex-col flex-1 uppercase font-mono font-bold",
+                      "text-normal flex items-center gap-1.5 flex-1 uppercase font-mono font-bold",
                       { "text-accent-500": menuItem.highlight },
                     ]}
                 >
                   {menuItem.name}
+                  {menuItem.external ? <ExternalLinkIcon /> : ""}
                 </a>
               </li>
           ))
@@ -162,8 +164,9 @@ const menuItems = [
         {
           menuItems.map(menuItem => (
             <li class="py-2 px-4">
-              <a href={menuItem.url} class="text-white text-shadow !text-lg text-normal flex flex-col flex-1 uppercase font-mono">
+              <a href={menuItem.url} class="text-white text-shadow !text-lg text-normal flex gap-1.5 items-center flex-1 uppercase font-mono">
                 {menuItem.name}
+                {menuItem.external ? <ExternalLinkIcon /> : ""}
               </a>
             </li>
           ))

From dc5f4143314df1fdfb64fbb04e38934139448b98 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 15:58:02 +0100
Subject: [PATCH 09/33] feat(site): change intro section for blog

---
 site/src/pages/blog/index.astro | 80 +++++++++++++++++----------------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index af6d56dbd5..d1afa97bcb 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -6,6 +6,7 @@ import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import { saneDateTime, toISODate } from "#/lib/utilities.ts"
 import { contentfulClient } from "#/lib/contentful/client.ts"
 import BlogIntroSection from "#/components/sections/blogIntroSection.astro"
+import AnimationLayout from "../../layouts/AnimationLayout.astro";
 
 export const prerender = false
 
@@ -27,47 +28,48 @@ const imageWithProtocol = (url: string) => `https:${url}`
 ---
 
 <SectionsLayout title="Union Blog" gapless>
-  <BlogIntroSection />
-  <div class="flex w-full justify-center pb-24">
-    <div class="max-w-[1440px]">
-      <!-- <H1>The <span class="text-accent-500">latest.</span></h1> -->
-      <div class="flex flex-col md:grid md:grid-cols-2 xl:grid-cols-3">
-        {
-          publishedBlogPosts.map((blogPostEntry: BlogPost) => (
-            <a class="pointer-cursor" href={`/blog/${blogPostEntry.fields.slug}`}>
-              <Card class="size-full border-none" padded>
-                <div class="border-2 w-full h-[14rem] rounded-tl-[7rem] overflow-hidden mb-2">
-                  <img
-                    class="w-full h-full object-cover border-none"
-                    loading="eager"
-                    alt={blogPostEntry.fields.cover.fields.title}
-                    src={`${imageWithProtocol(blogPostEntry.fields.cover.fields.file.url)}?fit=fill&f=center&fm=avif&w=1344&h=706`}
-                  />
-                </div>
-                <div class="flex flex-col gap-2">
-                  <H3>{blogPostEntry.fields.title}</H3>
-                  <div class="flex items-center justify-between text-xl font-mono font-semibold">
-                    <time
-                      class="text-accent-500"
-                      datetime={toISODate(`${blogPostEntry?.fields?.date}`)}
-                    >
-                      {saneDateTime(`${blogPostEntry?.fields?.date}`)}
-                    </time>
-                    <div class="h-full w-1 bg-white" />
-                    <p class="uppercase font-mono truncate">
-                      <span class="hidden lg:inline-block mr-2">Author: </span>
-                      {blogPostEntry.fields.author}
-                    </p>
-                  </div>
-                  <p class="text-base text-white font-mono">{blogPostEntry.fields.description}</p>
-                </div>
-              </Card>
-            </a>
-          ))
-        }
+  <AnimationLayout title="Development blog" text="Stay informed">
+    <div class="flex w-full justify-center py-16">
+      <div class="max-w-[1440px]">
+        <!-- <H1>The <span class="text-accent-500">latest.</span></h1> -->
+        <div class="flex flex-col md:grid md:grid-cols-2 xl:grid-cols-3">
+          {
+            publishedBlogPosts.map((blogPostEntry: BlogPost) => (
+                    <a class="pointer-cursor" href={`/blog/${blogPostEntry.fields.slug}`}>
+                      <Card class="size-full border-none" padded>
+                        <div class="border-2 w-full h-[14rem] rounded-tl-[7rem] overflow-hidden mb-2">
+                          <img
+                                  class="w-full h-full object-cover border-none"
+                                  loading="eager"
+                                  alt={blogPostEntry.fields.cover.fields.title}
+                                  src={`${imageWithProtocol(blogPostEntry.fields.cover.fields.file.url)}?fit=fill&f=center&fm=avif&w=1344&h=706`}
+                          />
+                        </div>
+                        <div class="flex flex-col gap-2">
+                          <H3>{blogPostEntry.fields.title}</H3>
+                          <div class="flex items-center justify-between text-xl font-mono font-semibold">
+                            <time
+                                    class="text-accent-500"
+                                    datetime={toISODate(`${blogPostEntry?.fields?.date}`)}
+                            >
+                              {saneDateTime(`${blogPostEntry?.fields?.date}`)}
+                            </time>
+                            <div class="h-full w-1 bg-white" />
+                            <p class="uppercase font-mono truncate">
+                              <span class="hidden lg:inline-block mr-2">Author: </span>
+                              {blogPostEntry.fields.author}
+                            </p>
+                          </div>
+                          <p class="text-base text-white font-mono">{blogPostEntry.fields.description}</p>
+                        </div>
+                      </Card>
+                    </a>
+            ))
+          }
+        </div>
       </div>
     </div>
-  </div>
+  </AnimationLayout>
 </SectionsLayout>
 
 <style is:inline>

From 0b857c083bceacbac09dcfccd346f1b366c30e5d Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 16:04:06 +0100
Subject: [PATCH 10/33] chore(site): clean up

---
 site/src/components/sections/TopSection.astro | 19 ----------
 .../src/components/sections/WaveSection.astro | 23 ------------
 .../components/sections/old/BlogSection.astro | 12 -------
 .../components/sections/old/CodeSection.astro | 35 -------------------
 .../old/ModularConnectedSection.astro         | 15 --------
 .../sections/old/ProductsSection.astro        | 24 -------------
 .../sections/old/SocialsSection.astro         | 12 -------
 site/src/pages/team.astro                     |  1 -
 8 files changed, 141 deletions(-)
 delete mode 100644 site/src/components/sections/TopSection.astro
 delete mode 100644 site/src/components/sections/WaveSection.astro
 delete mode 100644 site/src/components/sections/old/BlogSection.astro
 delete mode 100644 site/src/components/sections/old/CodeSection.astro
 delete mode 100644 site/src/components/sections/old/ModularConnectedSection.astro
 delete mode 100644 site/src/components/sections/old/ProductsSection.astro
 delete mode 100644 site/src/components/sections/old/SocialsSection.astro

diff --git a/site/src/components/sections/TopSection.astro b/site/src/components/sections/TopSection.astro
deleted file mode 100644
index a4bb9f258b..0000000000
--- a/site/src/components/sections/TopSection.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import MatrixCover from "../MatrixCover.astro"
----
-
-<div class="flex calc-h relative w-full">
-  <MatrixCover/>
-  <div class="absolute inset-0 flex justify-center w-full h-full">
-    <div class="w-full h-full max-w-[1440px] px-6">
-      <slot />
-    </div>
-  </div>
-</div>
-
-<style>
-  .calc-h {
-      height: calc(100svh - (68px));
-  }
-</style>
-
diff --git a/site/src/components/sections/WaveSection.astro b/site/src/components/sections/WaveSection.astro
deleted file mode 100644
index 62bfcb1f05..0000000000
--- a/site/src/components/sections/WaveSection.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import MatrixCover from "../MatrixCover.astro"
----
-
-<div class="relative grid h-svh">
-  <div class="bottom h-full w-full">
-    <MatrixCover/>
-  </div>
-  <div class="top w-full">
-
-  </div>
-</div>
-
-
-<style>
-    .top, .bottom {
-        grid-area: 1 / 1 / 2 / 2;
-    }
-
-    .top {
-        z-index: 1;
-    }
-</style>
\ No newline at end of file
diff --git a/site/src/components/sections/old/BlogSection.astro b/site/src/components/sections/old/BlogSection.astro
deleted file mode 100644
index 0a3f0cf5f6..0000000000
--- a/site/src/components/sections/old/BlogSection.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import LanderSection from "../../LanderSection.astro"
-import BlogSummary from "../../BlogSummary.astro"
-import IntroHeading from "../../typography/IntroHeading.astro"
----
-<LanderSection gradient="to-t">
-  <IntroHeading title="Blog">
-    Read the latest on Union's developments
-  </IntroHeading>
-  <BlogSummary/>
-</LanderSection>
-
diff --git a/site/src/components/sections/old/CodeSection.astro b/site/src/components/sections/old/CodeSection.astro
deleted file mode 100644
index 41e5834b75..0000000000
--- a/site/src/components/sections/old/CodeSection.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import LanderSection from "#/components/LanderSection.astro"
-import CodeSnippet from "#/components/CodeSnippet.astro"
-import Card from "#/components/Card.astro"
-import IntroHeading from "#/components/typography/IntroHeading.astro"
-import { codeSnippets } from "#/content/_snippets/landing.ts"
-// import { Tabs, TabItem } from "@astrojs/starlight/components"
----
-
-<LanderSection gradient="to-b">
-  <IntroHeading title="Supports Any Execution Environment">
-    Build whatever, wherever.
-  </IntroHeading>
-
-  <div class="grid grid-cols-2 gap-4 max-md:hidden">
-    <Card class="to-black p-2"><CodeSnippet code={codeSnippets[0].code} /></Card>
-    <Card class="to-black p-2"><CodeSnippet code={codeSnippets[1].code} /></Card>
-  </div>
-  <Card
-    id="code-snippets"
-    class="antialiased bg-black text-left font-monospace text-[15px] to-black md:hidden"
-  >
-    <!-- <Tabs>
-      {
-        codeSnippets.map(snippet => (
-          <TabItem label={snippet.title}>
-            <div class="pl-3 pb-3 w-full max-h-[40vh] overflow-y-scroll">
-              <CodeSnippet code={snippet.code} />
-            </div>
-          </TabItem>
-        ))
-      }
-    </Tabs> -->
-  </Card>
-</LanderSection>
diff --git a/site/src/components/sections/old/ModularConnectedSection.astro b/site/src/components/sections/old/ModularConnectedSection.astro
deleted file mode 100644
index 2ccdefe859..0000000000
--- a/site/src/components/sections/old/ModularConnectedSection.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import LanderSection from "../../LanderSection.astro"
-import IntroHeading from "../../typography/IntroHeading.astro"
-import Card from "../../Card.astro"
-import ConnectedVisual from "../../ConnectedVisual.svelte"
----
-
-<LanderSection gradient="to-t">
-  <IntroHeading title="Scale the Modular Stack" >
-    Union is the first infrastructure layer that unifies thousands of networks, unlocking horizontal scalability for any protocol.
-  </IntroHeading>
-  <Card>
-    <ConnectedVisual client:load />
-  </Card>
-</LanderSection>
diff --git a/site/src/components/sections/old/ProductsSection.astro b/site/src/components/sections/old/ProductsSection.astro
deleted file mode 100644
index a284dcab4c..0000000000
--- a/site/src/components/sections/old/ProductsSection.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-import LanderSection from "../../LanderSection.astro"
-import IntroHeading from "../../typography/IntroHeading.astro"
-import ProductSection from "../../ProductSection.astro"
-
-import microGaloisModel from "../../../spline/micro-galois-optimized.splinecode"
-import microCometblsModel from "../../../spline/micro-cometbls-optimized.splinecode"
-import microVoyagerModel from "../../../spline/micro-voyager-no-zoom.splinecode"
----
-<LanderSection>
-  <IntroHeading title="Build for a  Cypherpunk future">
-    <!-- Union is permissionless, nation-state resilient. -->
-  </IntroHeading>
-  <IntroHeading title="Some products title">
-    <!-- Union is permissionless, nation-state resilient. -->
-  </IntroHeading>
-  <div
-    class="grid grid-rows-3 grid-cols-1 sm:grid-cols-3 sm:grid-rows-1 gap-4 md:gap-8"
-  >
-    <ProductSection name="Galois" description="Decentralized proving for everyone. Galois, a key component of Union's ZK efforts, ensures proof verification with lightning-fast execution, cost-efficient operation, and decentralized infrastructure." link="/docs/architecture/galois" model={microGaloisModel}/>
-    <ProductSection name="CometBLS" description="ZK-aligned consensus engine. CometBLS is an enhancement upon Tendermint which utilizes BLS signatures for efficient ZK proving, and thereby ensuring secure bridging and consensus verification." link="/docs/architecture/cometbls" model={microCometblsModel}/>
-    <ProductSection name="Voyager" description="Stateless relaying for a cross-chain future. Voyager is our in-house relayer, allowing us to support new networks without waiting for up-stream support, by seamlessly integrating with Galois." link="/docs/architecture/voyager" model={microVoyagerModel}/>
-  </div>
-</LanderSection>
diff --git a/site/src/components/sections/old/SocialsSection.astro b/site/src/components/sections/old/SocialsSection.astro
deleted file mode 100644
index cb15cf3f88..0000000000
--- a/site/src/components/sections/old/SocialsSection.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import LanderSection from "../../LanderSection.astro"
-import SocialsGrid from "../../SocialsGrid.astro"
-import IntroHeading from "../../typography/IntroHeading.astro"
----
-
-<LanderSection gradient="to-b">
-  <IntroHeading title="Join the Union">
-    Help us build the endgame of interoperability.
-  </IntroHeading>
-  <SocialsGrid />
-</LanderSection>
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 5b1f9cdce0..96b126e811 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -4,7 +4,6 @@ import { contentfulClient } from "../lib/contentful/client.ts"
 
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import Card from "#/components/Card.astro"
-import TopSection from "../components/sections/TopSection.astro"
 
 import vc_galileo from "#/assets/images/investors/galileo.svg"
 import vc_nascent from "#/assets/images/investors/nascent.svg"

From bdf3e7e58956bfbde51e4cbb1e950cea8a099287 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 16:14:26 +0100
Subject: [PATCH 11/33] chore(site): remove unused imports

---
 site/src/components/Header.astro                           | 3 +--
 site/src/components/sections/MarqueeSection.astro          | 2 --
 site/src/components/sections/landing/ComeSwimSection.astro | 1 -
 site/src/components/sections/landing/IntroSection.astro    | 1 -
 site/src/pages/blog/index.astro                            | 3 +--
 site/src/pages/team.astro                                  | 1 -
 6 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 300b0bce46..93d41a07f0 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -1,7 +1,6 @@
 ---
-import unionLogo from "#/assets/union-logo/logo.svg"
 import { Icon } from "astro-icon/components"
-import ExternalLinkIcon from "./ExternalLinkIcon.astro";
+import ExternalLinkIcon from "./ExternalLinkIcon.astro"
 const menuItems = [
   {
     url: "/learn",
diff --git a/site/src/components/sections/MarqueeSection.astro b/site/src/components/sections/MarqueeSection.astro
index 7c422c74aa..f91463fd87 100644
--- a/site/src/components/sections/MarqueeSection.astro
+++ b/site/src/components/sections/MarqueeSection.astro
@@ -1,7 +1,5 @@
 ---
 import "../../styles/marquee.css"
-import ContainedSection from "../ContainedSection.astro"
-import LightedTitle from "../typography/LightedTitle.astro"
 import type { NamedImage } from "../../lib/types.ts"
 
 interface Props {
diff --git a/site/src/components/sections/landing/ComeSwimSection.astro b/site/src/components/sections/landing/ComeSwimSection.astro
index 6b7efce6ee..c9588744a1 100644
--- a/site/src/components/sections/landing/ComeSwimSection.astro
+++ b/site/src/components/sections/landing/ComeSwimSection.astro
@@ -1,7 +1,6 @@
 ---
 import { Image } from "astro:assets"
 import H1 from "../../typography/h1.astro"
-import swim from "#/assets/images/spline-holders/come-swim.png"
 import ContainedSection from "../../ContainedSection.astro"
 import Spline from "../../Spline.astro"
 ---
diff --git a/site/src/components/sections/landing/IntroSection.astro b/site/src/components/sections/landing/IntroSection.astro
index fa843f40d1..d863f8b36f 100644
--- a/site/src/components/sections/landing/IntroSection.astro
+++ b/site/src/components/sections/landing/IntroSection.astro
@@ -2,7 +2,6 @@
 import H1 from "../../typography/h1.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
-import SplineCover from "../../SplineCover.astro"
 import MatrixCover from "../../MatrixCover.astro"
 ---
 
diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index d1afa97bcb..28760cee1c 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -5,8 +5,7 @@ import H3 from "#/components/typography/h3.astro"
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import { saneDateTime, toISODate } from "#/lib/utilities.ts"
 import { contentfulClient } from "#/lib/contentful/client.ts"
-import BlogIntroSection from "#/components/sections/blogIntroSection.astro"
-import AnimationLayout from "../../layouts/AnimationLayout.astro";
+import AnimationLayout from "../../layouts/AnimationLayout.astro"
 
 export const prerender = false
 
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 96b126e811..ea3e15d613 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -17,7 +17,6 @@ import team_spearbit from "#/assets/images/partners/spearbit.svg"
 import team_groomlake from "#/assets/images/partners/groomlake.png"
 import team_horizons from "#/assets/images/partners/horizons.svg"
 import ContainedSection from "../components/ContainedSection.astro"
-import H1 from "../components/typography/h1.astro"
 import AnimationLayout from "../layouts/AnimationLayout.astro"
 
 const teams = [

From 7ef6c86a8232028487be09c4fa56a7413148515a Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 28 Oct 2024 17:02:59 +0100
Subject: [PATCH 12/33] fix(site): save type progress

---
 site/package-lock.json       |  14 ++++
 site/package.json            |   2 +
 site/src/lib/matrix-cover.ts | 136 +++++++++++++++++++++++++++--------
 3 files changed, 122 insertions(+), 30 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index d1969eb881..821a2c050a 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -21,6 +21,8 @@
         "@netlify/functions": "^2.8.1",
         "@splinetool/runtime": "^1.9.27",
         "@splinetool/viewer": "^1.9.27",
+        "@types/gl-matrix": "^2.4.5",
+        "@types/webgl2": "^0.0.11",
         "astro": "^5.0.0-beta.1",
         "astro-capo": "^0.0.1",
         "astro-font": "^0.1.81",
@@ -2070,6 +2072,12 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "license": "MIT"
     },
+    "node_modules/@types/gl-matrix": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@types/gl-matrix/-/gl-matrix-2.4.5.tgz",
+      "integrity": "sha512-0L8Mq1+oaIW0oVzGUDbSW+HnTjCNb4CmoIQE5BkoHt/A7x20z0MJ1PnwfH3atty/vbWLGgvJwVu2Mz3SKFiEFw==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -2172,6 +2180,12 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webgl2": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@types/webgl2/-/webgl2-0.0.11.tgz",
+      "integrity": "sha512-LFa4je4lUbqDVRNeC2W1ZRM8dOgsGsm23MZO7m/EllCVg07yB65W3eUF4MAM+0LU9X6x/0NTrvXxAW0pmipNdw==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
diff --git a/site/package.json b/site/package.json
index 1898dfb36c..cabf790057 100644
--- a/site/package.json
+++ b/site/package.json
@@ -25,6 +25,8 @@
     "@netlify/functions": "^2.8.1",
     "@splinetool/runtime": "^1.9.27",
     "@splinetool/viewer": "^1.9.27",
+    "@types/gl-matrix": "^2.4.5",
+    "@types/webgl2": "^0.0.11",
     "astro": "^5.0.0-beta.1",
     "astro-capo": "^0.0.1",
     "astro-font": "^0.1.81",
diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index 701ca34566..a43b744916 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -55,7 +55,7 @@ function updateRotation(now: number) {
   return newRotation
 }
 
-let canvas: HTMLCanvasElement
+let canvas: HTMLCanvasElement | null
 let mouseX = 0
 let mouseY = 0
 let targetMouseX = 0
@@ -71,6 +71,9 @@ const W2 = WIDTH / 2
 
 // Perlin noise implementation
 class PerlinNoise {
+  private readonly permutation: number[]
+  private readonly p: number[]
+
   constructor() {
     this.permutation = new Array(512)
     this.p = new Array(256).fill(0).map((_, i) => i)
@@ -83,22 +86,22 @@ class PerlinNoise {
     }
   }
 
-  fade(t) {
+  fade(t: number): number {
     return t * t * t * (t * (t * 6 - 15) + 10)
   }
 
-  lerp(t, a, b) {
+  lerp(t: number, a: number, b: number): number {
     return a + t * (b - a)
   }
 
-  grad(hash, x, y, z) {
+  grad(hash: number, x: number, y: number, z: number): number {
     const h = hash & 15
     const u = h < 8 ? x : y
     const v = h < 4 ? y : h === 12 || h === 14 ? x : z
     return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v)
   }
 
-  noise(x, y, z) {
+  noise(x: number, y: number, z: number): number {
     const X = Math.floor(x) & 255
     const Y = Math.floor(y) & 255
     const Z = Math.floor(z) & 255
@@ -151,8 +154,13 @@ class PerlinNoise {
 }
 
 function initWebGL() {
-  canvas = document.getElementById("waveCanvas")
-  const gl = canvas.getContext("webgl")
+  canvas = document.getElementById("waveCanvas") as HTMLCanvasElement | null
+  if (!canvas) {
+    console.error("Canvas element not found")
+    return
+  }
+
+  const gl: WebGLRenderingContext | null = canvas.getContext("webgl")
   if (!gl) {
     console.error("WebGL not supported")
     return
@@ -183,7 +191,11 @@ function initWebGL() {
     `
 
   // Initialize shaders
-  function initShaderProgram(gl, vsSource, fsSource) {
+  function initShaderProgram(
+    gl: WebGLRenderingContext,
+    vsSource: string,
+    fsSource: string
+  ): WebGLProgram | null {
     const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
     const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource)
 
@@ -192,6 +204,11 @@ function initWebGL() {
     }
 
     const shaderProgram = gl.createProgram()
+    if (!shaderProgram) {
+      console.error("Unable to create shader program")
+      return null
+    }
+
     gl.attachShader(shaderProgram, vertexShader)
     gl.attachShader(shaderProgram, fragmentShader)
     gl.linkProgram(shaderProgram)
@@ -206,8 +223,13 @@ function initWebGL() {
     return shaderProgram
   }
 
-  function loadShader(gl, type, source) {
+  function loadShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
     const shader = gl.createShader(type)
+    if (shader === null) {
+      console.error("Failed to create shader")
+      return null
+    }
+
     gl.shaderSource(shader, source)
     gl.compileShader(shader)
 
@@ -240,7 +262,29 @@ function initWebGL() {
   }
 
   // Create cube geometry
-  function initBuffers(gl) {
+  function initBuffers(gl: WebGLRenderingContext): {
+    position: WebGLBuffer
+    color: WebGLBuffer
+    indices: WebGLBuffer
+  } | null {
+    const positionBuffer = gl.createBuffer()
+    if (!positionBuffer) {
+      console.error("Failed to create position buffer")
+      return null
+    }
+
+    const colorBuffer = gl.createBuffer()
+    if (!colorBuffer) {
+      console.error("Failed to create color buffer")
+      return null
+    }
+
+    const indexBuffer = gl.createBuffer()
+    if (!indexBuffer) {
+      console.error("Failed to create index buffer")
+      return null
+    }
+
     const positions = [
       // Front face
       -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
@@ -256,7 +300,6 @@ function initWebGL() {
       -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5
     ]
 
-    const positionBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)
 
@@ -273,14 +316,13 @@ function initWebGL() {
     ]
 
     // biome-ignore lint/suspicious/noEvolvingTypes: idc
-    let colors = []
+    let colors: number[] = []
 
     for (let j = 0; j < faceColors.length; ++j) {
       const c = faceColors[j]
       colors = colors.concat(c, c, c, c)
     }
 
-    const colorBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW)
 
@@ -323,7 +365,6 @@ function initWebGL() {
       23 // left
     ]
 
-    const indexBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
 
@@ -339,7 +380,7 @@ function initWebGL() {
   const perlin = new PerlinNoise()
 
   // New function to calculate wave offset
-  function calculateWaveOffset(x, z, time) {
+  function calculateWaveOffset(x: number, z: number, time: number): number {
     const scale = 0.1
     const speed = 0.5
     const amplitude = 1.0
@@ -348,7 +389,28 @@ function initWebGL() {
     return noiseValue * amplitude
   }
 
-  function drawScene(gl, programInfo, buffers, cubePositions, totalTime) {
+  function drawScene(
+    gl: WebGLRenderingContext,
+    programInfo: {
+      program: WebGLProgram
+      attribLocations: {
+        vertexPosition: number
+        vertexColor: number
+      }
+      uniformLocations: {
+        projectionMatrix: WebGLUniformLocation
+        modelViewMatrix: WebGLUniformLocation
+        yOffset: WebGLUniformLocation
+      }
+    },
+    buffers: {
+      position: WebGLBuffer
+      color: WebGLBuffer
+      indices: WebGLBuffer
+    },
+    cubePositions: Array<glMatrix.vec3>,
+    totalTime: number
+  ): void {
     gl.viewport(0, 0, displayWidth, displayHeight)
     gl.clearColor(0.0, 0.0, 0.0, 1.0)
     gl.clearDepth(1.0)
@@ -452,13 +514,14 @@ function initWebGL() {
     }
   }
 
-  function onResize(entries) {
+  function onResize(entries: ResizeObserverEntry[]): void {
     for (const entry of entries) {
       let width: number
       let height: number
       let dpr = window.devicePixelRatio
       let dprSupport = false
-      if (entry.devicePixelContentBoxSize) {
+
+      if (entry.devicePixelContentBoxSize?.[0]) {
         // NOTE: Only this path gives the correct answer
         // The other paths are an imperfect fallback
         // for browsers that don't provide anyway to do this
@@ -467,22 +530,28 @@ function initWebGL() {
         dpr = 1 // it's already in width and height
         dprSupport = true
       } else if (entry.contentBoxSize) {
-        if (entry.contentBoxSize[0]) {
-          width = entry.contentBoxSize[0].inlineSize
-          height = entry.contentBoxSize[0].blockSize
-        } else {
-          // legacy
-          width = entry.contentBoxSize.inlineSize
-          height = entry.contentBoxSize.blockSize
-        }
+        // Handle array or single object for contentBoxSize
+        const contentBoxSize = Array.isArray(entry.contentBoxSize)
+          ? entry.contentBoxSize[0]
+          : entry.contentBoxSize
+        width = contentBoxSize.inlineSize
+        height = contentBoxSize.blockSize
       } else {
         // legacy
         width = entry.contentRect.width
         height = entry.contentRect.height
       }
+
       if (!RETINA_ENABLED) {
         dpr = 0.71
       }
+
+      // ensure we have valid numbers
+      if (typeof width !== "number" || typeof height !== "number") {
+        console.error("Invalid dimensions received")
+        return
+      }
+
       // update global state reflecting ideal canvas size
       displayWidth = Math.round(width * dpr)
       displayHeight = Math.round(height * dpr)
@@ -513,7 +582,8 @@ function initWebGL() {
   // Animation loop
   let then = 0
 
-  function render(now) {
+  function render(now: DOMHighResTimeStamp): void {
+    if (!canvas) return
     now *= 0.001 // convert to seconds
     const deltaTime = now - then
     then = now
@@ -531,10 +601,16 @@ function initWebGL() {
   requestAnimationFrame(render)
 
   // Update mouse position
-  function updateMousePosition(event) {
+  function updateMousePosition(event: MouseEvent): void {
+    if (!canvas) return
     const rect = canvas.getBoundingClientRect()
-    targetMouseX = ((event.clientX - rect.left) / canvas.width) * 4 - 1
-    targetMouseY = -(((event.clientY - rect.top) / canvas.height) * 4) + 1
+    const width = canvas.width || displayWidth // Fallback to displayWidth
+    const height = canvas.height || displayHeight // Fallback to displayHeight
+
+    if (width === 0 || height === 0) return // Prevent division by zero
+
+    targetMouseX = ((event.clientX - rect.left) / width) * 4 - 1
+    targetMouseY = -(((event.clientY - rect.top) / height) * 4) + 1
   }
 
   document.addEventListener("mousemove", updateMousePosition)

From 90ba3241d90543f04862a5c070c04cc9e8b4fe4c Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 17:08:54 +0100
Subject: [PATCH 13/33] fix(site): disable native viewtransitions

---
 site/package-lock.json                 | 37 ++++++++++++--------------
 site/package.json                      |  2 +-
 site/src/layouts/AnimationLayout.astro |  4 +--
 site/src/layouts/BaseLayout.astro      |  9 +++++++
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index 821a2c050a..0d5eed0ad1 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -23,7 +23,7 @@
         "@splinetool/viewer": "^1.9.27",
         "@types/gl-matrix": "^2.4.5",
         "@types/webgl2": "^0.0.11",
-        "astro": "^5.0.0-beta.1",
+        "astro": "^5.0.0-beta.5",
         "astro-capo": "^0.0.1",
         "astro-font": "^0.1.81",
         "astro-seo": "^0.8.4",
@@ -2545,16 +2545,15 @@
       }
     },
     "node_modules/astro": {
-      "version": "5.0.0-beta.4",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.0.0-beta.4.tgz",
-      "integrity": "sha512-IZkFpETZxOWxuRnUnp2Lg093Ep1+fZgsqLFFHRcjdq6jjNv1fz94wE3mQZelCgtBwUg9UHokoOdMvCichMxJcw==",
+      "version": "5.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-5.0.0-beta.5.tgz",
+      "integrity": "sha512-ONR2ngPbmi0CX1aCjvjLqvkcqakqYhHXTtTQAooADOxopyXS/l0WajHGsED75K4c7LMR0blDzBC9PPcfn0Oo0w==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
         "@astrojs/internal-helpers": "0.4.1",
         "@astrojs/markdown-remark": "6.0.0-beta.2",
         "@astrojs/telemetry": "3.1.0",
-        "@babel/types": "^7.25.7",
         "@oslojs/encoding": "^1.1.0",
         "@rollup/pluginutils": "^5.1.2",
         "@types/cookie": "^0.6.0",
@@ -2577,14 +2576,13 @@
         "esbuild": "^0.21.5",
         "estree-walker": "^3.0.3",
         "fast-glob": "^3.3.2",
-        "fastq": "^1.17.1",
         "flattie": "^1.1.1",
         "github-slugger": "^2.0.0",
         "html-escaper": "^3.0.3",
         "http-cache-semantics": "^4.1.1",
         "js-yaml": "^4.1.0",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.11",
+        "magic-string": "^0.30.12",
         "magicast": "^0.3.5",
         "micromatch": "^4.0.8",
         "mrmime": "^2.0.0",
@@ -2596,13 +2594,12 @@
         "rehype": "^13.0.2",
         "semver": "^7.6.3",
         "shiki": "^1.22.0",
-        "string-width": "^7.2.0",
         "tinyexec": "^0.3.0",
-        "tsconfck": "^3.1.3",
+        "tsconfck": "^3.1.4",
         "unist-util-visit": "^5.0.0",
         "vfile": "^6.0.3",
         "vite": "6.0.0-beta.2",
-        "vitefu": "^1.0.2",
+        "vitefu": "^1.0.3",
         "which-pm": "^3.0.0",
         "xxhash-wasm": "^1.0.2",
         "yargs-parser": "^21.1.1",
@@ -3221,16 +3218,16 @@
       }
     },
     "node_modules/astro/node_modules/vitefu": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.2.tgz",
-      "integrity": "sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.3.tgz",
+      "integrity": "sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==",
       "license": "MIT",
       "workspaces": [
         "tests/deps/*",
         "tests/projects/*"
       ],
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0"
       },
       "peerDependenciesMeta": {
         "vite": {
@@ -5829,9 +5826,9 @@
       "license": "ISC"
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -9173,9 +9170,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/tsconfck": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
-      "integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz",
+      "integrity": "sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==",
       "license": "MIT",
       "bin": {
         "tsconfck": "bin/tsconfck.js"
diff --git a/site/package.json b/site/package.json
index cabf790057..8208933d83 100644
--- a/site/package.json
+++ b/site/package.json
@@ -27,7 +27,7 @@
     "@splinetool/viewer": "^1.9.27",
     "@types/gl-matrix": "^2.4.5",
     "@types/webgl2": "^0.0.11",
-    "astro": "^5.0.0-beta.1",
+    "astro": "^5.0.0-beta.5",
     "astro-capo": "^0.0.1",
     "astro-font": "^0.1.81",
     "astro-seo": "^0.8.4",
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
index e69c204d10..395c636078 100644
--- a/site/src/layouts/AnimationLayout.astro
+++ b/site/src/layouts/AnimationLayout.astro
@@ -1,6 +1,6 @@
 ---
 import BorderIntro from "../components/sections/landing/BorderIntro.astro"
-import { ViewTransitions } from "astro:transitions"
+import { ClientRouter } from "astro:transitions"
 
 interface Props {
   title: any
@@ -11,7 +11,7 @@ const { title, text } = Astro.props
 ---
 
 <head>
-  <ViewTransitions/>
+  <ClientRouter/>
 </head>
 
 <BorderIntro {title} {text}/>
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 1d0d0bab90..8bf8b33586 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -32,9 +32,18 @@ const fontWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900]
  * docs: https://github.com/o-az/imageine
  */
 const openGraphImage = `${image}?fit=fill&f=center&fm=png&w=1200&h=630`
+
 ---
 
 <!doctype html>
+<script>
+  // native viewtransitions flash on page chagnes in some cases.
+  // astro does not provide an option to use the fallback client router,
+  // so we manually remove the viewtransition API from the document
+  // such that astro will use the fallback ClientRouter
+  // https://github.com/withastro/astro/blob/74ef2feb3a6a68e45a0cbfe60a61e90af6b4e923/packages/astro/src/transitions/router.ts#L37
+  document.startViewTransition = undefined;
+</script>
 <html lang="en">
   <Head>
     <meta charset="utf-8" />

From 51ab6b026687cf13d669c63abab4e2c120bb28f5 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 18:09:27 +0100
Subject: [PATCH 14/33] fix(site): handle missing team pictures

---
 site/src/components/TeamMember.astro | 41 ++++++++++++++++++++++++++++
 site/src/layouts/BaseLayout.astro    |  5 ++--
 site/src/pages/team.astro            | 25 ++---------------
 3 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 site/src/components/TeamMember.astro

diff --git a/site/src/components/TeamMember.astro b/site/src/components/TeamMember.astro
new file mode 100644
index 0000000000..f0649a1e3d
--- /dev/null
+++ b/site/src/components/TeamMember.astro
@@ -0,0 +1,41 @@
+---
+import Card from "#/components/Card.astro"
+
+interface Props {
+  person: {
+    twitterHandle: string
+    name: string
+    profilePicture: unknown
+    title: string
+  }
+}
+
+const { person } = Astro.props
+---
+                        
+<Card class="border-none group">
+  <a
+          href={`https://x.com/${person.twitterHandle}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="gap-4 flex flex-col"
+  >
+    <div class="object-cover overflow-hidden">
+    <!-- We don't have a picture for every person !-->
+    {person?.profilePicture?.fields?.file?.url ? 
+      <img
+              class="w-full h-auto group-hover:scale-110 transition"
+              src={person?.profilePicture?.fields?.file?.url}
+              alt={`${person.name} - Union worker`}
+      />
+      :
+      <div class="bg-neutral-900 aspect-1 w-full"></div>
+      }
+    </div>
+    <div class="leading-tight uppercase font-mono">
+      <h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
+      <div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
+      <div class="text-accent text-lg -mt-1 block">@{person.twitterHandle}</div>
+    </div>
+  </a>
+</Card>
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 8bf8b33586..743a3c4444 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -32,14 +32,13 @@ const fontWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900]
  * docs: https://github.com/o-az/imageine
  */
 const openGraphImage = `${image}?fit=fill&f=center&fm=png&w=1200&h=630`
-
 ---
 
 <!doctype html>
 <script>
-  // native viewtransitions flash on page chagnes in some cases.
+  // native ViewTransitions flash on page changes in some cases.
   // astro does not provide an option to use the fallback client router,
-  // so we manually remove the viewtransition API from the document
+  // so we manually remove the ViewTransition API from the document
   // such that astro will use the fallback ClientRouter
   // https://github.com/withastro/astro/blob/74ef2feb3a6a68e45a0cbfe60a61e90af6b4e923/packages/astro/src/transitions/router.ts#L37
   document.startViewTransition = undefined;
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index ea3e15d613..95cd10f4db 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -1,6 +1,7 @@
 ---
 import type { TeamPageFields, TeamPageSkeleton } from "../lib/contentful/types.ts"
 import { contentfulClient } from "../lib/contentful/client.ts"
+import TeamMember from "#/components/TeamMember.astro"
 
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import Card from "#/components/Card.astro"
@@ -114,29 +115,7 @@ try {
           <AnimationLayout title="Meet the team" text="Our team is a global network of professionals, working to build the interoperability future.">
             <ContainedSection>
               <div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
-                {teamData.map((person) => (
-                        <Card class="border-none group">
-                          <a
-                                  href={`https://x.com/${person.twitterHandle}`}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  class="gap-4 flex flex-col"
-                          >
-                            <div class="object-cover overflow-hidden">
-                              <img
-                                      class="w-full h-auto group-hover:scale-110 transition"
-                                      src={person.profilePicture.fields.file.url}
-                                      alt={`${person.name} - Union worker`}
-                              />
-                            </div>
-                            <div class="leading-tight uppercase font-mono">
-                              <h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
-                              <div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
-                              <div class="text-accent text-lg -mt-1 block">@{person.twitterHandle}</div>
-                            </div>
-                          </a>
-                        </Card>
-                ))}
+                {teamData.map((person) => <TeamMember {person}/>)}
               </div>
             </ContainedSection>
           </AnimationLayout>

From 488a034e024fcb9510052dc64ad857756ba94902 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 18:23:45 +0100
Subject: [PATCH 15/33] chore(site): remove unused import

---
 site/src/pages/team.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 95cd10f4db..5f0accd394 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -4,7 +4,6 @@ import { contentfulClient } from "../lib/contentful/client.ts"
 import TeamMember from "#/components/TeamMember.astro"
 
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
-import Card from "#/components/Card.astro"
 
 import vc_galileo from "#/assets/images/investors/galileo.svg"
 import vc_nascent from "#/assets/images/investors/nascent.svg"

From 4ff58b3aea79591d9e4cd825f9714a54fe9b3aba Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 18:24:12 +0100
Subject: [PATCH 16/33] fix(site): synchronize text slide and camera rotation

---
 site/src/components/sections/landing/BorderIntro.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 0319155b46..0154cd5039 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -93,7 +93,7 @@ const slideTextAnimation = {
 
   let previousPath = window.location.pathname;
 
-  document.addEventListener('astro:after-swap', (e) => {
+  document.addEventListener('astro:after-preparation', (e) => {
     rotateCamera('left');
   });
 </script>

From bd7f25dc882b2efc8748790967f2ea54fbf1b1f2 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 18:30:36 +0100
Subject: [PATCH 17/33] fix(site): align external link icon

---
 site/src/components/Header.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 93d41a07f0..db126251b9 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -107,7 +107,7 @@ const menuItems = [
                     ]}
                 >
                   {menuItem.name}
-                  {menuItem.external ? <ExternalLinkIcon /> : ""}
+                  {menuItem.external ? <ExternalLinkIcon class="-mt-0.5 size-4 text-neutral-500" /> : ""}
                 </a>
               </li>
           ))
@@ -165,7 +165,7 @@ const menuItems = [
             <li class="py-2 px-4">
               <a href={menuItem.url} class="text-white text-shadow !text-lg text-normal flex gap-1.5 items-center flex-1 uppercase font-mono">
                 {menuItem.name}
-                {menuItem.external ? <ExternalLinkIcon /> : ""}
+                {menuItem.external ? <ExternalLinkIcon class="-mt-0.5 size-4 text-neutral-500" /> : ""}
               </a>
             </li>
           ))

From 4065e4674b3770df41d9c059331090b1ae0d47c5 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 19:43:56 +0100
Subject: [PATCH 18/33] fix(site): angle

---
 site/src/lib/matrix-cover.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index a43b744916..ffc367bb5b 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -434,7 +434,7 @@ function initWebGL() {
     mouseX += (targetMouseX - mouseX) * 0.1
     mouseY += (targetMouseY - mouseY) * 0.1
 
-    glMatrix.mat4.lookAt(modelViewMatrix, [0, 20, -15], [0, -2, 0], [0, 1, 0])
+    glMatrix.mat4.lookAt(modelViewMatrix, [0, 12, 12], [0, -2, 0], [0, 1, 0])
 
     // Apply rotations
     const currentRotation = updateRotation(totalTime * 1000)

From 2e46ad450a81484e49a10350ad603ca80562360b Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 20:35:41 +0100
Subject: [PATCH 19/33] fix(site): correct rotation

---
 site/src/lib/matrix-cover.ts | 346 +++++++++++++----------------------
 1 file changed, 123 insertions(+), 223 deletions(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index ffc367bb5b..3a4abda652 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -1,61 +1,21 @@
 import * as glMatrix from "gl-matrix"
 
-type OrbitDirection = "left" | "right"
-
-interface AnimationState {
-  currentRotation: number
-  targetRotation: number
-  isTransitioning: boolean
-  transitionStartTime: number
-  transitionDuration: number
-  totalRotation: number
-  lastTargetRotation: number
+let currentPlaneRotation = 0; // Track plane rotation in radians
+let targetPlaneRotation = 0; // Track target plane rotation in radians
+let isRotating = false;
+let rotationStartTime = 0;
+const ROTATION_DURATION = 1000; // Duration in milliseconds
+
+// Add this function to handle the rotation
+export function rotateCamera() {
+  if (isRotating) return;
+
+  isRotating = true;
+  rotationStartTime = performance.now();
+  targetPlaneRotation = currentPlaneRotation + Math.PI / 2; // 90 degrees in radians
 }
 
-let state: AnimationState = {
-  currentRotation: Math.PI / 4,
-  targetRotation: Math.PI / 4,
-  isTransitioning: false,
-  transitionStartTime: 0,
-  transitionDuration: 1000,
-  totalRotation: Math.PI / 4,
-  lastTargetRotation: Math.PI / 4
-}
-
-function startRotationTransition(angle: number) {
-  if (state.isTransitioning) {
-    state.totalRotation += angle
-    state.targetRotation = state.totalRotation
-    state.transitionStartTime = performance.now()
-    return
-  }
-
-  state.isTransitioning = true
-  state.transitionStartTime = performance.now()
-  state.totalRotation = state.currentRotation + angle
-  state.targetRotation = state.totalRotation
-}
-
-function updateRotation(now: number) {
-  if (!state.isTransitioning) return state.currentRotation
-
-  const elapsed = now - state.transitionStartTime
-  const progress = Math.min(elapsed / state.transitionDuration, 1)
-
-  const eased = progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2
-
-  const newRotation = state.currentRotation + (state.targetRotation - state.currentRotation) * eased
-
-  if (progress >= 1) {
-    state.isTransitioning = false
-    state.currentRotation = state.targetRotation
-    state.lastTargetRotation = state.targetRotation
-  }
-
-  return newRotation
-}
-
-let canvas: HTMLCanvasElement | null
+let canvas: HTMLCanvasElement
 let mouseX = 0
 let mouseY = 0
 let targetMouseX = 0
@@ -71,9 +31,6 @@ const W2 = WIDTH / 2
 
 // Perlin noise implementation
 class PerlinNoise {
-  private readonly permutation: number[]
-  private readonly p: number[]
-
   constructor() {
     this.permutation = new Array(512)
     this.p = new Array(256).fill(0).map((_, i) => i)
@@ -86,22 +43,22 @@ class PerlinNoise {
     }
   }
 
-  fade(t: number): number {
+  fade(t) {
     return t * t * t * (t * (t * 6 - 15) + 10)
   }
 
-  lerp(t: number, a: number, b: number): number {
+  lerp(t, a, b) {
     return a + t * (b - a)
   }
 
-  grad(hash: number, x: number, y: number, z: number): number {
+  grad(hash, x, y, z) {
     const h = hash & 15
     const u = h < 8 ? x : y
     const v = h < 4 ? y : h === 12 || h === 14 ? x : z
     return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v)
   }
 
-  noise(x: number, y: number, z: number): number {
+  noise(x, y, z) {
     const X = Math.floor(x) & 255
     const Y = Math.floor(y) & 255
     const Z = Math.floor(z) & 255
@@ -154,13 +111,8 @@ class PerlinNoise {
 }
 
 function initWebGL() {
-  canvas = document.getElementById("waveCanvas") as HTMLCanvasElement | null
-  if (!canvas) {
-    console.error("Canvas element not found")
-    return
-  }
-
-  const gl: WebGLRenderingContext | null = canvas.getContext("webgl")
+  canvas = document.getElementById("waveCanvas")
+  const gl = canvas.getContext("webgl")
   if (!gl) {
     console.error("WebGL not supported")
     return
@@ -191,11 +143,7 @@ function initWebGL() {
     `
 
   // Initialize shaders
-  function initShaderProgram(
-    gl: WebGLRenderingContext,
-    vsSource: string,
-    fsSource: string
-  ): WebGLProgram | null {
+  function initShaderProgram(gl, vsSource, fsSource) {
     const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
     const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource)
 
@@ -204,11 +152,6 @@ function initWebGL() {
     }
 
     const shaderProgram = gl.createProgram()
-    if (!shaderProgram) {
-      console.error("Unable to create shader program")
-      return null
-    }
-
     gl.attachShader(shaderProgram, vertexShader)
     gl.attachShader(shaderProgram, fragmentShader)
     gl.linkProgram(shaderProgram)
@@ -223,13 +166,8 @@ function initWebGL() {
     return shaderProgram
   }
 
-  function loadShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
+  function loadShader(gl, type, source) {
     const shader = gl.createShader(type)
-    if (shader === null) {
-      console.error("Failed to create shader")
-      return null
-    }
-
     gl.shaderSource(shader, source)
     gl.compileShader(shader)
 
@@ -262,29 +200,7 @@ function initWebGL() {
   }
 
   // Create cube geometry
-  function initBuffers(gl: WebGLRenderingContext): {
-    position: WebGLBuffer
-    color: WebGLBuffer
-    indices: WebGLBuffer
-  } | null {
-    const positionBuffer = gl.createBuffer()
-    if (!positionBuffer) {
-      console.error("Failed to create position buffer")
-      return null
-    }
-
-    const colorBuffer = gl.createBuffer()
-    if (!colorBuffer) {
-      console.error("Failed to create color buffer")
-      return null
-    }
-
-    const indexBuffer = gl.createBuffer()
-    if (!indexBuffer) {
-      console.error("Failed to create index buffer")
-      return null
-    }
-
+  function initBuffers(gl) {
     const positions = [
       // Front face
       -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
@@ -300,6 +216,7 @@ function initWebGL() {
       -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5
     ]
 
+    const positionBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)
 
@@ -316,13 +233,14 @@ function initWebGL() {
     ]
 
     // biome-ignore lint/suspicious/noEvolvingTypes: idc
-    let colors: number[] = []
+    let colors = []
 
     for (let j = 0; j < faceColors.length; ++j) {
       const c = faceColors[j]
       colors = colors.concat(c, c, c, c)
     }
 
+    const colorBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW)
 
@@ -365,6 +283,7 @@ function initWebGL() {
       23 // left
     ]
 
+    const indexBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
 
@@ -380,7 +299,7 @@ function initWebGL() {
   const perlin = new PerlinNoise()
 
   // New function to calculate wave offset
-  function calculateWaveOffset(x: number, z: number, time: number): number {
+  function calculateWaveOffset(x, z, time) {
     const scale = 0.1
     const speed = 0.5
     const amplitude = 1.0
@@ -389,69 +308,72 @@ function initWebGL() {
     return noiseValue * amplitude
   }
 
-  function drawScene(
-    gl: WebGLRenderingContext,
-    programInfo: {
-      program: WebGLProgram
-      attribLocations: {
-        vertexPosition: number
-        vertexColor: number
-      }
-      uniformLocations: {
-        projectionMatrix: WebGLUniformLocation
-        modelViewMatrix: WebGLUniformLocation
-        yOffset: WebGLUniformLocation
-      }
-    },
-    buffers: {
-      position: WebGLBuffer
-      color: WebGLBuffer
-      indices: WebGLBuffer
-    },
-    cubePositions: Array<glMatrix.vec3>,
-    totalTime: number
-  ): void {
-    gl.viewport(0, 0, displayWidth, displayHeight)
-    gl.clearColor(0.0, 0.0, 0.0, 1.0)
-    gl.clearDepth(1.0)
-    gl.enable(gl.DEPTH_TEST)
-    gl.depthFunc(gl.LEQUAL)
+  // Draw scene
+  function drawScene(gl, programInfo, buffers, cubePositions, totalTime) {
+    gl.viewport(0, 0, displayWidth, displayHeight);
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);
+    gl.clearDepth(1.0);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    const fieldOfView = (50 * Math.PI) / 180;
+    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+    const zNear = 0.1;
+    const zFar = 100.0;
+    const projectionMatrix = glMatrix.mat4.create();
+
+    glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+
+    // Create separate matrices for camera and plane transformations
+    const cameraMatrix = glMatrix.mat4.create();
+    const modelMatrix = glMatrix.mat4.create();
 
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+    // Handle rotation animation
+    if (isRotating) {
+      const elapsed = performance.now() - rotationStartTime;
+      const progress = Math.min(elapsed / ROTATION_DURATION, 1);
 
-    // Adjusted field of view for better perspective
-    const fieldOfView = (45 * Math.PI) / 180
-    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
-    const zNear = 0.1
-    const zFar = 100.0
-    const projectionMatrix = glMatrix.mat4.create()
+      // Use easeInOutCubic for smooth animation
+      const easeProgress = progress < 0.5
+        ? 4 * progress * progress * progress
+        : 1 - Math.pow(-2 * progress + 2, 3) / 2;
 
-    glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar)
+      currentPlaneRotation = currentPlaneRotation + (targetPlaneRotation - currentPlaneRotation) * easeProgress;
 
-    const modelViewMatrix = glMatrix.mat4.create()
+      if (progress >= 1) {
+        isRotating = false;
+        currentPlaneRotation = targetPlaneRotation; // Ensure we end at exact target
+      }
+    }
 
     // Smooth out mouse movement
-    mouseX += (targetMouseX - mouseX) * 0.1
-    mouseY += (targetMouseY - mouseY) * 0.1
+    mouseX += (targetMouseX - mouseX) * 0.1;
+    mouseY += (targetMouseY - mouseY) * 0.1;
 
-    glMatrix.mat4.lookAt(modelViewMatrix, [0, 12, 12], [0, -2, 0], [0, 1, 0])
+    // Set up camera view
+    glMatrix.mat4.translate(cameraMatrix, cameraMatrix, [0, 0, -16]);
 
-    // Apply rotations
-    const currentRotation = updateRotation(totalTime * 1000)
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, currentRotation, [0, 1, 0])
+    // Apply camera rotations (fixed angle + mouse movement)
+    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, endRotationY + mouseY * 0.05, [1, 0, 0]);
+    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, -endRotationX + mouseX * 0.05, [0, 1, 0]);
 
-    // Reduced mouse movement sensitivity
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseY * 0.05, [1, 0, 0])
-    glMatrix.mat4.rotate(modelViewMatrix, modelViewMatrix, mouseX * 0.05, [0, 1, 0])
+    // Apply plane rotation to model matrix
+    glMatrix.mat4.rotate(modelMatrix, modelMatrix, currentPlaneRotation, [0, 1, 0]);
+
+    // Combine camera and model matrices
+    const modelViewMatrix = glMatrix.mat4.create();
+    glMatrix.mat4.multiply(modelViewMatrix, cameraMatrix, modelMatrix);
 
     // Set up attribute buffers
     {
-      const numComponents = 3
-      const type = gl.FLOAT
-      const normalize = false
-      const stride = 0
-      const offset = 0
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position)
+      const numComponents = 3;
+      const type = gl.FLOAT;
+      const normalize = false;
+      const stride = 0;
+      const offset = 0;
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
       gl.vertexAttribPointer(
         programInfo.attribLocations.vertexPosition,
         numComponents,
@@ -459,17 +381,17 @@ function initWebGL() {
         normalize,
         stride,
         offset
-      )
-      gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition)
+      );
+      gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
     }
 
     {
-      const numComponents = 4
-      const type = gl.FLOAT
-      const normalize = false
-      const stride = 0
-      const offset = 0
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color)
+      const numComponents = 4;
+      const type = gl.FLOAT;
+      const normalize = false;
+      const stride = 0;
+      const offset = 0;
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
       gl.vertexAttribPointer(
         programInfo.attribLocations.vertexColor,
         numComponents,
@@ -477,51 +399,47 @@ function initWebGL() {
         normalize,
         stride,
         offset
-      )
-      gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor)
+      );
+      gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
     }
 
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices)
-
-    gl.useProgram(programInfo.program)
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
+    gl.useProgram(programInfo.program);
 
-    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix)
+    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
 
     // Draw cubes
     for (let i = 0; i < cubePositions.length; i++) {
-      const cubeMatrix = glMatrix.mat4.create()
-      const [x, _, z] = cubePositions[i]
-      glMatrix.mat4.translate(cubeMatrix, modelViewMatrix, cubePositions[i])
+      const cubeMatrix = glMatrix.mat4.create();
+      const [x, _, z] = cubePositions[i];
+      glMatrix.mat4.translate(cubeMatrix, modelViewMatrix, cubePositions[i]);
 
-      // Apply wave motion with new calculation
-      const waveOffset = calculateWaveOffset(x, z, totalTime)
-      glMatrix.mat4.translate(cubeMatrix, cubeMatrix, [0, waveOffset * 1.2, 0])
+      // Apply wave motion
+      const waveOffset = calculateWaveOffset(x, z, totalTime);
+      glMatrix.mat4.translate(cubeMatrix, cubeMatrix, [0, waveOffset * 1.2, 0]);
 
       // Set y-offset uniform for fading
-      gl.uniform1f(programInfo.uniformLocations.yOffset, waveOffset)
+      gl.uniform1f(programInfo.uniformLocations.yOffset, waveOffset);
 
       // Scale down the cubes
-      glMatrix.mat4.scale(cubeMatrix, cubeMatrix, [0.4, 0.4, 0.4])
+      glMatrix.mat4.scale(cubeMatrix, cubeMatrix, [0.4, 0.4, 0.4]);
 
-      gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, cubeMatrix)
+      gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, cubeMatrix);
 
-      {
-        const vertexCount = 36
-        const type = gl.UNSIGNED_SHORT
-        const offset = 0
-        gl.drawElements(gl.TRIANGLES, vertexCount, type, offset)
-      }
+      const vertexCount = 36;
+      const type = gl.UNSIGNED_SHORT;
+      const offset = 0;
+      gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
     }
   }
 
-  function onResize(entries: ResizeObserverEntry[]): void {
+  function onResize(entries) {
     for (const entry of entries) {
       let width: number
       let height: number
       let dpr = window.devicePixelRatio
       let dprSupport = false
-
-      if (entry.devicePixelContentBoxSize?.[0]) {
+      if (entry.devicePixelContentBoxSize) {
         // NOTE: Only this path gives the correct answer
         // The other paths are an imperfect fallback
         // for browsers that don't provide anyway to do this
@@ -530,28 +448,22 @@ function initWebGL() {
         dpr = 1 // it's already in width and height
         dprSupport = true
       } else if (entry.contentBoxSize) {
-        // Handle array or single object for contentBoxSize
-        const contentBoxSize = Array.isArray(entry.contentBoxSize)
-          ? entry.contentBoxSize[0]
-          : entry.contentBoxSize
-        width = contentBoxSize.inlineSize
-        height = contentBoxSize.blockSize
+        if (entry.contentBoxSize[0]) {
+          width = entry.contentBoxSize[0].inlineSize
+          height = entry.contentBoxSize[0].blockSize
+        } else {
+          // legacy
+          width = entry.contentBoxSize.inlineSize
+          height = entry.contentBoxSize.blockSize
+        }
       } else {
         // legacy
         width = entry.contentRect.width
         height = entry.contentRect.height
       }
-
       if (!RETINA_ENABLED) {
         dpr = 0.71
       }
-
-      // ensure we have valid numbers
-      if (typeof width !== "number" || typeof height !== "number") {
-        console.error("Invalid dimensions received")
-        return
-      }
-
       // update global state reflecting ideal canvas size
       displayWidth = Math.round(width * dpr)
       displayHeight = Math.round(height * dpr)
@@ -582,8 +494,7 @@ function initWebGL() {
   // Animation loop
   let then = 0
 
-  function render(now: DOMHighResTimeStamp): void {
-    if (!canvas) return
+  function render(now) {
     now *= 0.001 // convert to seconds
     const deltaTime = now - then
     then = now
@@ -601,16 +512,10 @@ function initWebGL() {
   requestAnimationFrame(render)
 
   // Update mouse position
-  function updateMousePosition(event: MouseEvent): void {
-    if (!canvas) return
+  function updateMousePosition(event) {
     const rect = canvas.getBoundingClientRect()
-    const width = canvas.width || displayWidth // Fallback to displayWidth
-    const height = canvas.height || displayHeight // Fallback to displayHeight
-
-    if (width === 0 || height === 0) return // Prevent division by zero
-
-    targetMouseX = ((event.clientX - rect.left) / width) * 4 - 1
-    targetMouseY = -(((event.clientY - rect.top) / height) * 4) + 1
+    targetMouseX = ((event.clientX - rect.left) / canvas.width) * 4 - 1
+    targetMouseY = -(((event.clientY - rect.top) / canvas.height) * 4) + 1
   }
 
   document.addEventListener("mousemove", updateMousePosition)
@@ -621,10 +526,5 @@ function initWebGL() {
   }
 }
 
-export function rotateCamera(direction: OrbitDirection) {
-  const angle = direction === "right" ? Math.PI / 2 : -Math.PI / 2
-  startRotationTransition(angle)
-}
-
 // Initialize WebGL when the component mounts
-document.addEventListener("DOMContentLoaded", initWebGL)
+document.addEventListener("DOMContentLoaded", initWebGL)
\ No newline at end of file

From 076e8edebe10645f4d643b7130e3e24d525cc0f5 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 20:45:11 +0100
Subject: [PATCH 20/33] fix(site): more easing

---
 site/src/lib/matrix-cover.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index 3a4abda652..5a915d2af5 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -1,12 +1,12 @@
 import * as glMatrix from "gl-matrix"
 
-let currentPlaneRotation = 0; // Track plane rotation in radians
-let targetPlaneRotation = 0; // Track target plane rotation in radians
+let currentPlaneRotation = 0;
+let targetPlaneRotation = 0;
 let isRotating = false;
 let rotationStartTime = 0;
-const ROTATION_DURATION = 1000; // Duration in milliseconds
+const ROTATION_DURATION = 1500;
+const EASE_POWER = 4;
 
-// Add this function to handle the rotation
 export function rotateCamera() {
   if (isRotating) return;
 
@@ -335,10 +335,14 @@ function initWebGL() {
       const elapsed = performance.now() - rotationStartTime;
       const progress = Math.min(elapsed / ROTATION_DURATION, 1);
 
-      // Use easeInOutCubic for smooth animation
-      const easeProgress = progress < 0.5
-        ? 4 * progress * progress * progress
-        : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+      let easeProgress;
+      if (progress < 0.5) {
+        // Ease-in (start slow, accelerate)
+        easeProgress = Math.pow(progress * 2, EASE_POWER) / 2;
+      } else {
+        // Ease-out (decelerate to end)
+        easeProgress = 1 - Math.pow(2 - progress * 2, EASE_POWER) / 2;
+      }
 
       currentPlaneRotation = currentPlaneRotation + (targetPlaneRotation - currentPlaneRotation) * easeProgress;
 

From 17620ab4784ccced07c3d9213038490bf2ba4347 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 20:46:16 +0100
Subject: [PATCH 21/33] fix(site): update rotateCamera

---
 site/src/lib/matrix-cover.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index 5a915d2af5..ebc15824ea 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -8,11 +8,13 @@ const ROTATION_DURATION = 1500;
 const EASE_POWER = 4;
 
 export function rotateCamera() {
-  if (isRotating) return;
-
-  isRotating = true;
-  rotationStartTime = performance.now();
-  targetPlaneRotation = currentPlaneRotation + Math.PI / 2; // 90 degrees in radians
+  if (isRotating) {
+    targetPlaneRotation += Math.PI / 2;
+  } else {
+    isRotating = true;
+    rotationStartTime = performance.now();
+    targetPlaneRotation = currentPlaneRotation + Math.PI / 2;
+  }
 }
 
 let canvas: HTMLCanvasElement

From 9c2cc6d08c2d3efd45dca22e7cf371ebf504d2c3 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 21:50:35 +0100
Subject: [PATCH 22/33] refactor(site): remove SectionsLayout

---
 site/src/components/ContainedSection.astro    |  2 +-
 site/src/components/Header.astro              |  8 +++-
 site/src/components/SectionsContainer.astro   | 11 ++++++
 .../components/sections/DeepDiveSection.astro |  2 +-
 site/src/layouts/AnimationLayout.astro        |  7 ++--
 site/src/layouts/BaseLayout.astro             |  4 +-
 site/src/layouts/SectionsLayout.astro         | 20 ----------
 site/src/pages/blog/index.astro               |  4 +-
 site/src/pages/brand-kit.astro                |  3 --
 site/src/pages/ecosystem.astro                |  9 ++---
 site/src/pages/index.astro                    | 38 +++++++++----------
 site/src/pages/learn.astro                    |  3 --
 site/src/pages/team.astro                     |  3 --
 13 files changed, 50 insertions(+), 64 deletions(-)
 create mode 100644 site/src/components/SectionsContainer.astro
 delete mode 100644 site/src/layouts/SectionsLayout.astro

diff --git a/site/src/components/ContainedSection.astro b/site/src/components/ContainedSection.astro
index 78bcf15d2c..e2231e429d 100644
--- a/site/src/components/ContainedSection.astro
+++ b/site/src/components/ContainedSection.astro
@@ -7,7 +7,7 @@ const { className } = Astro.props
 ---
 
 <section class=`flex w-full justify-center items-center ${className}`>
-  <div class="max-w-[1440px] w-full z-10 px-4 overflow-hidden">
+  <div class="max-w-6xl w-full z-10 px-4 overflow-hidden">
     <slot />
   </div>
 </section>
diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index db126251b9..3d390725d5 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -14,6 +14,12 @@ const menuItems = [
     highlight: false,
     external: false
   },
+  {
+    url: "/blog",
+    name: "blog",
+    highlight: false,
+    external: false
+  },
   {
     url: "https://docs.union.build/",
     name: "docs",
@@ -64,7 +70,7 @@ const menuItems = [
 <header
   class="z-[100] w-full flex justify-around"
 >
-  <div class="max-w-[1440px] min-h-[68px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
+  <div class="max-w-6xl min-h-[68px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
     <a
       href="/"
       id="union-logo"
diff --git a/site/src/components/SectionsContainer.astro b/site/src/components/SectionsContainer.astro
new file mode 100644
index 0000000000..b623bc1de8
--- /dev/null
+++ b/site/src/components/SectionsContainer.astro
@@ -0,0 +1,11 @@
+---
+interface Props {
+	gapless?: boolean
+}
+
+const { gapless } = Astro.props
+---
+
+<main class:list={["flex flex-col relative", {"gap-8 md:gap-16 lg:gap-32 my-8 md:my-16 lg:my-32": !gapless}]}>
+	<slot />
+</main>
diff --git a/site/src/components/sections/DeepDiveSection.astro b/site/src/components/sections/DeepDiveSection.astro
index acbc422de8..d13770e0ef 100644
--- a/site/src/components/sections/DeepDiveSection.astro
+++ b/site/src/components/sections/DeepDiveSection.astro
@@ -21,7 +21,7 @@ const { entries } = Astro.props
 
 
 <div class="flex justify-center py-24 text-lg font-mono" id="swim-container">
-  <div class="relative grid grid-cols-4 gap-4 max-w-[1440px] px-6">
+  <div class="relative grid grid-cols-4 gap-4 max-w-6xl px-6">
     <div class="flex flex-col col-span-full md:col-span-3 gap-12 md:gap-24 lg:gap-48">
 
       <div id="">
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
index 395c636078..f47dba4820 100644
--- a/site/src/layouts/AnimationLayout.astro
+++ b/site/src/layouts/AnimationLayout.astro
@@ -1,4 +1,5 @@
 ---
+import Layout from "#/layouts/Layout.astro"
 import BorderIntro from "../components/sections/landing/BorderIntro.astro"
 import { ClientRouter } from "astro:transitions"
 
@@ -14,8 +15,8 @@ const { title, text } = Astro.props
   <ClientRouter/>
 </head>
 
-<BorderIntro {title} {text}/>
-<div class="relative">
+<Layout title="Union">
+  <BorderIntro {title} {text}/>
   <slot/>
-</div>
+</Layout>
 
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 743a3c4444..60d7fad34d 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -35,14 +35,16 @@ const openGraphImage = `${image}?fit=fill&f=center&fm=png&w=1200&h=630`
 ---
 
 <!doctype html>
+<!--
 <script>
   // native ViewTransitions flash on page changes in some cases.
   // astro does not provide an option to use the fallback client router,
   // so we manually remove the ViewTransition API from the document
   // such that astro will use the fallback ClientRouter
   // https://github.com/withastro/astro/blob/74ef2feb3a6a68e45a0cbfe60a61e90af6b4e923/packages/astro/src/transitions/router.ts#L37
-  document.startViewTransition = undefined;
+  document.startViewTransition = false;
 </script>
+!-->
 <html lang="en">
   <Head>
     <meta charset="utf-8" />
diff --git a/site/src/layouts/SectionsLayout.astro b/site/src/layouts/SectionsLayout.astro
deleted file mode 100644
index 43c9a88451..0000000000
--- a/site/src/layouts/SectionsLayout.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import Layout from "./Layout.astro"
-
-interface Props {
-  url?: string
-  title?: string
-  image?: string
-  description?: string
-  gapless?: boolean
-}
-
-const { url, title, image, description, gapless } = Astro.props
----
-
-<Layout {url} {title} {image} {description}>
-  <main class:list={["flex flex-col relative", {"gap-8 md:gap-16 lg:gap-32": !gapless}]}>
-    <slot />
-  </main>
-</Layout>
-
diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index 28760cee1c..bc142ddc11 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -26,10 +26,9 @@ Astro.response.headers.set("cache-control", "public, max-age=0, must-revalidate"
 const imageWithProtocol = (url: string) => `https:${url}`
 ---
 
-<SectionsLayout title="Union Blog" gapless>
   <AnimationLayout title="Development blog" text="Stay informed">
     <div class="flex w-full justify-center py-16">
-      <div class="max-w-[1440px]">
+      <div class="max-w-6xl">
         <!-- <H1>The <span class="text-accent-500">latest.</span></h1> -->
         <div class="flex flex-col md:grid md:grid-cols-2 xl:grid-cols-3">
           {
@@ -69,7 +68,6 @@ const imageWithProtocol = (url: string) => `https:${url}`
       </div>
     </div>
   </AnimationLayout>
-</SectionsLayout>
 
 <style is:inline>
   *::selection {
diff --git a/site/src/pages/brand-kit.astro b/site/src/pages/brand-kit.astro
index d7ba2700f5..a45bd90b9b 100644
--- a/site/src/pages/brand-kit.astro
+++ b/site/src/pages/brand-kit.astro
@@ -1,5 +1,4 @@
 ---
-import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import LanderSection from "#/components/LanderSection.astro"
 import IntroHeading from "#/components/typography/IntroHeading.astro"
 import Card from "#/components/Card.astro"
@@ -32,7 +31,6 @@ const colors = [
   }
 ]
 ---
-<SectionsLayout title="Union Brand Kit">
   <LanderSection>
     <IntroHeading main title="Union Brand Kit">Logo, fonts, colors.</IntroHeading>
     <Card padded>
@@ -78,4 +76,3 @@ const colors = [
       </ul>
     </Card>
   </LanderSection>
-</SectionsLayout>
diff --git a/site/src/pages/ecosystem.astro b/site/src/pages/ecosystem.astro
index c5bc18d1db..69bc7effc6 100644
--- a/site/src/pages/ecosystem.astro
+++ b/site/src/pages/ecosystem.astro
@@ -1,11 +1,8 @@
 ---
-import SectionsLayout from "../layouts/SectionsLayout.astro"
 import EcosystemSection from "../components/sections/EcosystemSection.astro"
 import AnimationLayout from "../layouts/AnimationLayout.astro"
 ---
 
-<SectionsLayout gapless>
-  <AnimationLayout title="Ecosystem" text="Connecting projects, people, and products into a unified organism of interoperability.">
-    <EcosystemSection/>
-  </AnimationLayout>
-</SectionsLayout>
+<AnimationLayout title="Ecosystem" text="Connecting projects, people, and products into a unified organism of interoperability.">
+  <EcosystemSection/>
+</AnimationLayout>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index e9174d1399..afb62a6232 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -3,8 +3,8 @@
 import { contentfulClient } from "../lib/contentful/client.ts"
 import type { LandingPageSkeleton, LandingPageFields } from "../lib/contentful/types.ts"
 
+import SectionsContainer from '#/components/SectionsContainer.astro'
 import ContainedSection from "../components//ContainedSection.astro"
-import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import ConsensusSection from "../components/sections/landing/ConsensusSection.astro"
 import ZkSection from "../components/sections/landing/ZkSection.astro"
 import ExecutionSection from "../components/sections/landing/ExecutionSection.astro"
@@ -81,7 +81,6 @@ try {
 }
 ---
 
-<SectionsLayout title="Union">
   {error ? (
           <div class="error-message">
             <h2>Error</h2>
@@ -89,27 +88,28 @@ try {
           </div>
   ) : landingData ? (
           <AnimationLayout title="Join the union" text="The next generation of aggregation, interoperability, and chain abstraction.">
-            <ConsensusSection
-                    title={landingData.secondTitle}
-                    text={landingData.secondText}
-            />
-            <ZkSection
-                    title={landingData.thirdTitle}
-                    text={landingData.thirdText}
-            />
-            <ExecutionSection
-                    title={landingData.fourthTitle}
-                    text={landingData.fourthText}
-            />
-            <ContainedSection>
-              <MarqueeSection title={"Our pod."} reverse={false} data={pods} />
-              <MarqueeSection title={"Our partners."} reverse={true} data={partners} />
-            </ContainedSection>
+            <SectionsContainer>
+              <ConsensusSection
+                      title={landingData.secondTitle}
+                      text={landingData.secondText}
+              />
+              <ZkSection
+                      title={landingData.thirdTitle}
+                      text={landingData.thirdText}
+              />
+              <ExecutionSection
+                      title={landingData.fourthTitle}
+                      text={landingData.fourthText}
+              />
+              <ContainedSection>
+                <MarqueeSection title={"Our pod."} reverse={false} data={pods} />
+                <MarqueeSection title={"Our partners."} reverse={true} data={partners} />
+              </ContainedSection>
+            </SectionsContainer>
           </AnimationLayout>
   ) : (
           <div class="loading-message">
             <p>Loading content...</p>
           </div>
   )}
-</SectionsLayout>
 
diff --git a/site/src/pages/learn.astro b/site/src/pages/learn.astro
index 7155c15ef0..6774c3a0d9 100644
--- a/site/src/pages/learn.astro
+++ b/site/src/pages/learn.astro
@@ -1,5 +1,4 @@
 ---
-import SectionsLayout from "../layouts/SectionsLayout.astro"
 import DeepDiveSection from "../components/sections/DeepDiveSection.astro"
 import { contentfulClient } from "../lib/contentful/client.ts"
 import { renderRichText, renderTitle } from "../lib/contentful/render.ts"
@@ -26,7 +25,6 @@ try {
 }
 ---
 
-<SectionsLayout title="Learn" gapless>
   {error ? (
           <div class="error-message">
             <h2>Error</h2>
@@ -41,4 +39,3 @@ try {
             <p>Loading content...</p>
           </div>
   )}
-</SectionsLayout>
\ No newline at end of file
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 5f0accd394..9f7af45d73 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -3,7 +3,6 @@ import type { TeamPageFields, TeamPageSkeleton } from "../lib/contentful/types.t
 import { contentfulClient } from "../lib/contentful/client.ts"
 import TeamMember from "#/components/TeamMember.astro"
 
-import SectionsLayout from "#/layouts/SectionsLayout.astro"
 
 import vc_galileo from "#/assets/images/investors/galileo.svg"
 import vc_nascent from "#/assets/images/investors/nascent.svg"
@@ -104,7 +103,6 @@ try {
 }
 ---
 
-<SectionsLayout gapless title="Union Team">
   {error ? (
           <div class="error-message">
             <h2>Error</h2>
@@ -123,5 +121,4 @@ try {
             <p>Loading content...</p>
           </div>
   )}
-</SectionsLayout>
 

From d7ea8631b2208c7fdb309fd3caf66079c4b088cf Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 22:02:36 +0100
Subject: [PATCH 23/33] fix(site): only disable ViewTransitions client side

---
 site/src/layouts/BaseLayout.astro | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 60d7fad34d..db8b0739d2 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -35,8 +35,7 @@ const openGraphImage = `${image}?fit=fill&f=center&fm=png&w=1200&h=630`
 ---
 
 <!doctype html>
-<!--
-<script>
+<script client:only>
   // native ViewTransitions flash on page changes in some cases.
   // astro does not provide an option to use the fallback client router,
   // so we manually remove the ViewTransition API from the document
@@ -44,7 +43,6 @@ const openGraphImage = `${image}?fit=fill&f=center&fm=png&w=1200&h=630`
   // https://github.com/withastro/astro/blob/74ef2feb3a6a68e45a0cbfe60a61e90af6b4e923/packages/astro/src/transitions/router.ts#L37
   document.startViewTransition = false;
 </script>
-!-->
 <html lang="en">
   <Head>
     <meta charset="utf-8" />

From a5c8d00aa28373eff8ae67447e099c1d6c149fa4 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 22:02:49 +0100
Subject: [PATCH 24/33] fix(site): don't use rems for sizing SVGs

---
 site/src/components/Header.astro | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 3d390725d5..63b0923921 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -124,7 +124,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://discord.union.build"
           >
-            <Icon name="tabler:brand-discord-filled" color="#fff" size="1.2rem" />
+            <Icon name="tabler:brand-discord-filled" color="#fff" size="20px" />
             <span class="sr-only">Discord</span>
           </a>
         </li>
@@ -134,7 +134,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://github.com/unionlabs/union"
           >
-            <Icon name="tabler:brand-github-filled" color="#fff" size="1.2rem" />
+            <Icon name="tabler:brand-github-filled" color="#fff" size="20px" />
             <span class="sr-only">GitHub</span>
           </a>
         </li>
@@ -144,7 +144,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://x.com/union_build"
           >
-            <Icon name="fa6-brands:x-twitter" color="#fff" size="1.1rem" />
+            <Icon name="fa6-brands:x-twitter" color="#fff" size="18px" />
             <span class="sr-only">X</span>
           </a>
         </li>
@@ -159,7 +159,7 @@ const menuItems = [
         title="Menu"
         class="bg-white h-[32px] w-[32px] flex items-center justify-center cursor-pointer !p-0"
       >
-        <Icon name="tabler:menu-2" color="#000000" size="1.2rem" />
+        <Icon name="tabler:menu-2" color="#000000" size="20px" />
       </button>
 
       <ul
@@ -184,7 +184,7 @@ const menuItems = [
             class="flex gap-2 text-lg px-4 py-2 uppercase"
           >
             <label>Discord</label>
-            <Icon name="tabler:brand-discord-filled" color="#fff" size="1rem" class="my-auto" />
+            <Icon name="tabler:brand-discord-filled" color="#fff" size="16px" class="my-auto" />
           </a>
         </li>
         <li class="">
@@ -195,7 +195,7 @@ const menuItems = [
             class="flex gap-2 text-lg px-4 py-2 uppercase"
           >
             <label>X.com</label>
-            <Icon name="fa6-brands:x-twitter" color="#fff" size="1.1rem" class="my-auto" />
+            <Icon name="fa6-brands:x-twitter" color="#fff" size="18px" class="my-auto" />
           </a>
         </li>
       </ul>

From 552be358f0e67c4abe49632dcd3b68e3cbd7aaf6 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 22:16:00 +0100
Subject: [PATCH 25/33] fix(site): border

---
 site/src/components/MatrixCover.astro         |  2 +-
 .../sections/landing/BorderIntro.astro        | 97 ++++++++++++-------
 2 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/site/src/components/MatrixCover.astro b/site/src/components/MatrixCover.astro
index 916f0b9204..7157ff8578 100644
--- a/site/src/components/MatrixCover.astro
+++ b/site/src/components/MatrixCover.astro
@@ -2,6 +2,6 @@
 // WaveCubes.astro
 ---
 <!-- inline style is to prevent white flash on slow internet !-->
-<canvas style="background-color: black;" class="matrix-cover w-full h-full block" id="waveCanvas" width="3840"
+<canvas style="background-color: black;" class="w-full h-full block rounded" id="waveCanvas" width="3840"
         height="2160" transition:persist></canvas>
 <script src="../lib/matrix-cover.ts"/>
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 0154cd5039..85294f7944 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -2,7 +2,6 @@
 import MatrixCover from "../../MatrixCover.astro"
 import H1 from "../../typography/h1.astro"
 import TextP from "../../typography/TextP.astro"
-// import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
 
 interface Props {
   title: string
@@ -11,10 +10,6 @@ interface Props {
 
 const { title, text } = Astro.props
 
-// const titleHtml = renderTitle(title)
-// const textHtml = renderRichText(text)
-
-// Define custom animation
 const slideTextAnimation = {
   forwards: {
     old: {
@@ -34,6 +29,7 @@ const slideTextAnimation = {
 ---
 
 <div class="header-grid">
+  <div class="glow-effect"></div>
   <MatrixCover/>
   <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
     <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
@@ -45,55 +41,82 @@ const slideTextAnimation = {
 
 <style lang="postcss" is:global>
     .header-grid {
-        --outer-border: 0px;
-        --inner-border: 0px;
+        --outer-border: 3px;
+        --inner-border: 1px;
         height: calc(100svh - 68px);
         width: 100%;
         display: grid;
-        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        grid-template-rows: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
         grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .glow-effect {
+        grid-area: 3 / 3 / 6 / 6;
+        background: conic-gradient(
+                from 0deg at 50% 50%,
+                rgba(160, 236, 253, 1) 15deg,
+                rgba(160, 236, 253, 0) 15deg,
+                rgba(160, 236, 253, 0) 55deg,
+                rgba(160, 236, 253, 0) 345deg,
+                rgba(160, 236, 253, 1) 345deg
+        );
+        z-index: 2;
+        mix-blend-mode: screen;
+        transition: transform 0.1s ease-out;
+        transform: scale(10);
     }
 
     .header-grid > canvas {
         grid-area: 3 / 3 / 6 / 6;
-        background-color: black;
+        background-color: transparent;
+        z-index: 3;
     }
 
     .header-text-content {
         grid-area: 4 / 3 / 5 / 6;
-        z-index: 1;
-    }
-
-
-    @keyframes slideOutLeft {
-        from {
-            transform: translateX(0);
-            opacity: 1;
-        }
-        to {
-            transform: translateX(-100%);
-            opacity: 0;
-        }
-    }
-
-    @keyframes slideInRight {
-        from {
-            transform: translateX(100%);
-            opacity: 0;
-        }
-        to {
-            transform: translateX(0);
-            opacity: 1;
-        }
+        z-index: 4;
     }
 </style>
 
 <script>
   import {rotateCamera} from "../../../lib/matrix-cover";
 
-  let previousPath = window.location.pathname;
-
   document.addEventListener('astro:after-preparation', (e) => {
-    rotateCamera('left');
+    rotateCamera();
   });
-</script>
+
+  const headerGrid = document.querySelector('.header-grid');
+  const glowEffect = document.querySelector('.glow-effect');
+  let previousAngle = 0;
+  let currentRotation = 0;
+
+  if (headerGrid && glowEffect) {
+    headerGrid.addEventListener('mousemove', (e) => {
+      const rect = headerGrid.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      const deltaX = e.clientX - centerX;
+      const deltaY = e.clientY - centerY;
+      const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      const scale = Math.max(4, (distance / rect.height) * 8);
+
+      let angleDiff = newAngle - previousAngle;
+
+      if (angleDiff > 180) {
+        angleDiff -= 360;
+      } else if (angleDiff < -180) {
+        angleDiff += 360;
+      }
+
+      currentRotation += angleDiff;
+      previousAngle = newAngle;
+
+      glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
+    });
+  }
+</script>
\ No newline at end of file

From 50e16c9191ac71695bd310e191a0df28aeb86984 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 22:23:45 +0100
Subject: [PATCH 26/33] fix(stie): persist rotation

---
 .../sections/landing/BorderIntro.astro        | 67 ++++++++++++-------
 1 file changed, 44 insertions(+), 23 deletions(-)

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 85294f7944..0b351f400d 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -29,7 +29,7 @@ const slideTextAnimation = {
 ---
 
 <div class="header-grid">
-  <div class="glow-effect"></div>
+  <div class="glow-effect" transition:persist></div>
   <MatrixCover/>
   <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
     <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
@@ -87,36 +87,57 @@ const slideTextAnimation = {
     rotateCamera();
   });
 
-  const headerGrid = document.querySelector('.header-grid');
-  const glowEffect = document.querySelector('.glow-effect');
+  let headerGrid;
+  let glowEffect;
   let previousAngle = 0;
   let currentRotation = 0;
+  let mouseMoveHandler;
 
-  if (headerGrid && glowEffect) {
-    headerGrid.addEventListener('mousemove', (e) => {
-      const rect = headerGrid.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
+  function initializeGlowEffect() {
+    headerGrid = document.querySelector('.header-grid');
+    glowEffect = document.querySelector('.glow-effect');
 
-      const deltaX = e.clientX - centerX;
-      const deltaY = e.clientY - centerY;
-      const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+    if (headerGrid && glowEffect) {
+      mouseMoveHandler = (e) => {
+        const rect = headerGrid.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
 
-      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      const scale = Math.max(4, (distance / rect.height) * 8);
+        const deltaX = e.clientX - centerX;
+        const deltaY = e.clientY - centerY;
+        const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
 
-      let angleDiff = newAngle - previousAngle;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const scale = Math.max(4, (distance / rect.height) * 8);
 
-      if (angleDiff > 180) {
-        angleDiff -= 360;
-      } else if (angleDiff < -180) {
-        angleDiff += 360;
-      }
+        let angleDiff = newAngle - previousAngle;
 
-      currentRotation += angleDiff;
-      previousAngle = newAngle;
+        if (angleDiff > 180) {
+          angleDiff -= 360;
+        } else if (angleDiff < -180) {
+          angleDiff += 360;
+        }
 
-      glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
-    });
+        currentRotation += angleDiff;
+        previousAngle = newAngle;
+
+        glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
+      };
+
+      headerGrid.addEventListener('mousemove', mouseMoveHandler);
+    }
   }
+
+  function cleanup() {
+    if (headerGrid && mouseMoveHandler) {
+      headerGrid.removeEventListener('mousemove', mouseMoveHandler);
+    }
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    cleanup();
+    initializeGlowEffect();
+  });
+
+  document.addEventListener('astro:before-preparation', cleanup);
 </script>
\ No newline at end of file

From 0c23585666bfcb0e31cf81429364a431f94f37e7 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Tue, 29 Oct 2024 22:41:14 +0100
Subject: [PATCH 27/33] fix(site): muted border

---
 site/src/pages/blog/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index bc142ddc11..8c26f653a3 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -35,7 +35,7 @@ const imageWithProtocol = (url: string) => `https:${url}`
             publishedBlogPosts.map((blogPostEntry: BlogPost) => (
                     <a class="pointer-cursor" href={`/blog/${blogPostEntry.fields.slug}`}>
                       <Card class="size-full border-none" padded>
-                        <div class="border-2 w-full h-[14rem] rounded-tl-[7rem] overflow-hidden mb-2">
+                        <div class="border-2 border-neutral-800 w-full h-[14rem] rounded-tl-[4rem] overflow-hidden mb-2">
                           <img
                                   class="w-full h-full object-cover border-none"
                                   loading="eager"

From 7086dcfe0d9a8e8695cf1bbe354643b7b863acee Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 23:13:04 +0100
Subject: [PATCH 28/33] fix(site): border edits

---
 .../src/components/sections/landing/BorderIntro.astro | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index 0b351f400d..b12b74bfcb 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -43,6 +43,7 @@ const slideTextAnimation = {
     .header-grid {
         --outer-border: 3px;
         --inner-border: 1px;
+        background-color: rgba(115, 115, 115, 0.35);
         height: calc(100svh - 68px);
         width: 100%;
         display: grid;
@@ -53,7 +54,10 @@ const slideTextAnimation = {
     }
 
     .glow-effect {
-        grid-area: 3 / 3 / 6 / 6;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
         background: conic-gradient(
                 from 0deg at 50% 50%,
                 rgba(160, 236, 253, 1) 15deg,
@@ -62,10 +66,9 @@ const slideTextAnimation = {
                 rgba(160, 236, 253, 0) 345deg,
                 rgba(160, 236, 253, 1) 345deg
         );
-        z-index: 2;
         mix-blend-mode: screen;
-        transition: transform 0.1s ease-out;
-        transform: scale(10);
+        filter: blur(10px);
+        transform-origin: center;
     }
 
     .header-grid > canvas {

From 88ae0d6a32b584b2ade3e6e83a576638f740f865 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 23:18:52 +0100
Subject: [PATCH 29/33] fix(site): border

---
 .../sections/landing/BorderIntro.astro        | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index b12b74bfcb..f034fca561 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -28,23 +28,33 @@ const slideTextAnimation = {
 }
 ---
 
-<div class="header-grid">
-  <div class="glow-effect" transition:persist></div>
-  <MatrixCover/>
-  <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
-    <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
-      <H1>{title}</H1>
-      <TextP>{text}</TextP>
+
+<div class="header-container">
+  <div class="header-grid">
+    <div class="glow-effect" transition:persist></div>
+    <MatrixCover/>
+    <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
+      <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
+        <H1>{title}</H1>
+        <TextP>{text}</TextP>
+      </div>
     </div>
   </div>
 </div>
 
 <style lang="postcss" is:global>
+
+    .header-container {
+        padding: 0.5rem;
+        height: calc(100svh - 75px);
+        width: 100%;
+    }
+
     .header-grid {
-        --outer-border: 3px;
-        --inner-border: 1px;
+        --outer-border: 0.25rem;
+        --inner-border: 0px;
         background-color: rgba(115, 115, 115, 0.35);
-        height: calc(100svh - 68px);
+        height: 100%;
         width: 100%;
         display: grid;
         grid-template-rows: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);

From 6720911842679f7b1b1cb8606427cfece66d265b Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 23:39:47 +0100
Subject: [PATCH 30/33] fix(site): border as per staging

---
 site/src/components/SectionsContainer.astro   |   2 +-
 .../sections/landing/BorderIntro.astro        |  42 ++---
 site/src/lib/matrix-cover.ts                  | 145 +++++++++---------
 site/src/pages/index.astro                    |   2 +-
 site/src/pages/team.astro                     |   1 -
 5 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/site/src/components/SectionsContainer.astro b/site/src/components/SectionsContainer.astro
index b623bc1de8..1446e4d56b 100644
--- a/site/src/components/SectionsContainer.astro
+++ b/site/src/components/SectionsContainer.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-	gapless?: boolean
+  gapless?: boolean
 }
 
 const { gapless } = Astro.props
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
index f034fca561..ef46cda4a2 100644
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ b/site/src/components/sections/landing/BorderIntro.astro
@@ -28,36 +28,29 @@ const slideTextAnimation = {
 }
 ---
 
-
-<div class="header-container">
-  <div class="header-grid">
+<div class="header-grid">
+  <div class="shiny-border">
     <div class="glow-effect" transition:persist></div>
-    <MatrixCover/>
-    <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
-      <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
-        <H1>{title}</H1>
-        <TextP>{text}</TextP>
-      </div>
+  </div>
+  <MatrixCover />
+  <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
+    <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
+      <H1>{title}</H1>
+      <TextP>{text}</TextP>
     </div>
   </div>
 </div>
 
 <style lang="postcss" is:global>
-
-    .header-container {
-        padding: 0.5rem;
-        height: calc(100svh - 75px);
-        width: 100%;
-    }
-
     .header-grid {
-        --outer-border: 0.25rem;
-        --inner-border: 0px;
-        background-color: rgba(115, 115, 115, 0.35);
-        height: 100%;
+        --outer-border: 8px;
+        --inner-border: 5px;
+        --header-height: 68px;
+        height: calc(100vh - var(--header-height));
+        min-height: 400px;
         width: 100%;
         display: grid;
-        grid-template-rows: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
         grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
         position: relative;
         overflow: hidden;
@@ -81,6 +74,13 @@ const slideTextAnimation = {
         transform-origin: center;
     }
 
+    .shiny-border {
+        background-color: #262626;
+        grid-area: 2 / 2 / 7 / 7;
+        position: relative;
+        overflow: hidden;
+    }
+
     .header-grid > canvas {
         grid-area: 3 / 3 / 6 / 6;
         background-color: transparent;
diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index ebc15824ea..a3e293cb8c 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -1,19 +1,19 @@
 import * as glMatrix from "gl-matrix"
 
-let currentPlaneRotation = 0;
-let targetPlaneRotation = 0;
-let isRotating = false;
-let rotationStartTime = 0;
-const ROTATION_DURATION = 1500;
-const EASE_POWER = 4;
+let currentPlaneRotation = 0
+let targetPlaneRotation = 0
+let isRotating = false
+let rotationStartTime = 0
+const ROTATION_DURATION = 1500
+const EASE_POWER = 4
 
 export function rotateCamera() {
   if (isRotating) {
-    targetPlaneRotation += Math.PI / 2;
+    targetPlaneRotation += Math.PI / 2
   } else {
-    isRotating = true;
-    rotationStartTime = performance.now();
-    targetPlaneRotation = currentPlaneRotation + Math.PI / 2;
+    isRotating = true
+    rotationStartTime = performance.now()
+    targetPlaneRotation = currentPlaneRotation + Math.PI / 2
   }
 }
 
@@ -312,74 +312,75 @@ function initWebGL() {
 
   // Draw scene
   function drawScene(gl, programInfo, buffers, cubePositions, totalTime) {
-    gl.viewport(0, 0, displayWidth, displayHeight);
-    gl.clearColor(0.0, 0.0, 0.0, 1.0);
-    gl.clearDepth(1.0);
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LEQUAL);
+    gl.viewport(0, 0, displayWidth, displayHeight)
+    gl.clearColor(0.0, 0.0, 0.0, 1.0)
+    gl.clearDepth(1.0)
+    gl.enable(gl.DEPTH_TEST)
+    gl.depthFunc(gl.LEQUAL)
 
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
 
-    const fieldOfView = (50 * Math.PI) / 180;
-    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-    const zNear = 0.1;
-    const zFar = 100.0;
-    const projectionMatrix = glMatrix.mat4.create();
+    const fieldOfView = (50 * Math.PI) / 180
+    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight
+    const zNear = 0.1
+    const zFar = 100.0
+    const projectionMatrix = glMatrix.mat4.create()
 
-    glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+    glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar)
 
     // Create separate matrices for camera and plane transformations
-    const cameraMatrix = glMatrix.mat4.create();
-    const modelMatrix = glMatrix.mat4.create();
+    const cameraMatrix = glMatrix.mat4.create()
+    const modelMatrix = glMatrix.mat4.create()
 
     // Handle rotation animation
     if (isRotating) {
-      const elapsed = performance.now() - rotationStartTime;
-      const progress = Math.min(elapsed / ROTATION_DURATION, 1);
+      const elapsed = performance.now() - rotationStartTime
+      const progress = Math.min(elapsed / ROTATION_DURATION, 1)
 
-      let easeProgress;
+      let easeProgress
       if (progress < 0.5) {
         // Ease-in (start slow, accelerate)
-        easeProgress = Math.pow(progress * 2, EASE_POWER) / 2;
+        easeProgress = Math.pow(progress * 2, EASE_POWER) / 2
       } else {
         // Ease-out (decelerate to end)
-        easeProgress = 1 - Math.pow(2 - progress * 2, EASE_POWER) / 2;
+        easeProgress = 1 - Math.pow(2 - progress * 2, EASE_POWER) / 2
       }
 
-      currentPlaneRotation = currentPlaneRotation + (targetPlaneRotation - currentPlaneRotation) * easeProgress;
+      currentPlaneRotation =
+        currentPlaneRotation + (targetPlaneRotation - currentPlaneRotation) * easeProgress
 
       if (progress >= 1) {
-        isRotating = false;
-        currentPlaneRotation = targetPlaneRotation; // Ensure we end at exact target
+        isRotating = false
+        currentPlaneRotation = targetPlaneRotation // Ensure we end at exact target
       }
     }
 
     // Smooth out mouse movement
-    mouseX += (targetMouseX - mouseX) * 0.1;
-    mouseY += (targetMouseY - mouseY) * 0.1;
+    mouseX += (targetMouseX - mouseX) * 0.1
+    mouseY += (targetMouseY - mouseY) * 0.1
 
     // Set up camera view
-    glMatrix.mat4.translate(cameraMatrix, cameraMatrix, [0, 0, -16]);
+    glMatrix.mat4.translate(cameraMatrix, cameraMatrix, [0, 0, -16])
 
     // Apply camera rotations (fixed angle + mouse movement)
-    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, endRotationY + mouseY * 0.05, [1, 0, 0]);
-    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, -endRotationX + mouseX * 0.05, [0, 1, 0]);
+    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, endRotationY + mouseY * 0.05, [1, 0, 0])
+    glMatrix.mat4.rotate(cameraMatrix, cameraMatrix, -endRotationX + mouseX * 0.05, [0, 1, 0])
 
     // Apply plane rotation to model matrix
-    glMatrix.mat4.rotate(modelMatrix, modelMatrix, currentPlaneRotation, [0, 1, 0]);
+    glMatrix.mat4.rotate(modelMatrix, modelMatrix, currentPlaneRotation, [0, 1, 0])
 
     // Combine camera and model matrices
-    const modelViewMatrix = glMatrix.mat4.create();
-    glMatrix.mat4.multiply(modelViewMatrix, cameraMatrix, modelMatrix);
+    const modelViewMatrix = glMatrix.mat4.create()
+    glMatrix.mat4.multiply(modelViewMatrix, cameraMatrix, modelMatrix)
 
     // Set up attribute buffers
     {
-      const numComponents = 3;
-      const type = gl.FLOAT;
-      const normalize = false;
-      const stride = 0;
-      const offset = 0;
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+      const numComponents = 3
+      const type = gl.FLOAT
+      const normalize = false
+      const stride = 0
+      const offset = 0
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position)
       gl.vertexAttribPointer(
         programInfo.attribLocations.vertexPosition,
         numComponents,
@@ -387,17 +388,17 @@ function initWebGL() {
         normalize,
         stride,
         offset
-      );
-      gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+      )
+      gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition)
     }
 
     {
-      const numComponents = 4;
-      const type = gl.FLOAT;
-      const normalize = false;
-      const stride = 0;
-      const offset = 0;
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+      const numComponents = 4
+      const type = gl.FLOAT
+      const normalize = false
+      const stride = 0
+      const offset = 0
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color)
       gl.vertexAttribPointer(
         programInfo.attribLocations.vertexColor,
         numComponents,
@@ -405,37 +406,37 @@ function initWebGL() {
         normalize,
         stride,
         offset
-      );
-      gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
+      )
+      gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor)
     }
 
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
-    gl.useProgram(programInfo.program);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices)
+    gl.useProgram(programInfo.program)
 
-    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
+    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix)
 
     // Draw cubes
     for (let i = 0; i < cubePositions.length; i++) {
-      const cubeMatrix = glMatrix.mat4.create();
-      const [x, _, z] = cubePositions[i];
-      glMatrix.mat4.translate(cubeMatrix, modelViewMatrix, cubePositions[i]);
+      const cubeMatrix = glMatrix.mat4.create()
+      const [x, _, z] = cubePositions[i]
+      glMatrix.mat4.translate(cubeMatrix, modelViewMatrix, cubePositions[i])
 
       // Apply wave motion
-      const waveOffset = calculateWaveOffset(x, z, totalTime);
-      glMatrix.mat4.translate(cubeMatrix, cubeMatrix, [0, waveOffset * 1.2, 0]);
+      const waveOffset = calculateWaveOffset(x, z, totalTime)
+      glMatrix.mat4.translate(cubeMatrix, cubeMatrix, [0, waveOffset * 1.2, 0])
 
       // Set y-offset uniform for fading
-      gl.uniform1f(programInfo.uniformLocations.yOffset, waveOffset);
+      gl.uniform1f(programInfo.uniformLocations.yOffset, waveOffset)
 
       // Scale down the cubes
-      glMatrix.mat4.scale(cubeMatrix, cubeMatrix, [0.4, 0.4, 0.4]);
+      glMatrix.mat4.scale(cubeMatrix, cubeMatrix, [0.4, 0.4, 0.4])
 
-      gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, cubeMatrix);
+      gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, cubeMatrix)
 
-      const vertexCount = 36;
-      const type = gl.UNSIGNED_SHORT;
-      const offset = 0;
-      gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+      const vertexCount = 36
+      const type = gl.UNSIGNED_SHORT
+      const offset = 0
+      gl.drawElements(gl.TRIANGLES, vertexCount, type, offset)
     }
   }
 
@@ -533,4 +534,4 @@ function initWebGL() {
 }
 
 // Initialize WebGL when the component mounts
-document.addEventListener("DOMContentLoaded", initWebGL)
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", initWebGL)
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index afb62a6232..6abb3b7d25 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -3,7 +3,7 @@
 import { contentfulClient } from "../lib/contentful/client.ts"
 import type { LandingPageSkeleton, LandingPageFields } from "../lib/contentful/types.ts"
 
-import SectionsContainer from '#/components/SectionsContainer.astro'
+import SectionsContainer from "#/components/SectionsContainer.astro"
 import ContainedSection from "../components//ContainedSection.astro"
 import ConsensusSection from "../components/sections/landing/ConsensusSection.astro"
 import ZkSection from "../components/sections/landing/ZkSection.astro"
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index 9f7af45d73..394112d4e2 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -3,7 +3,6 @@ import type { TeamPageFields, TeamPageSkeleton } from "../lib/contentful/types.t
 import { contentfulClient } from "../lib/contentful/client.ts"
 import TeamMember from "#/components/TeamMember.astro"
 
-
 import vc_galileo from "#/assets/images/investors/galileo.svg"
 import vc_nascent from "#/assets/images/investors/nascent.svg"
 import vc_tioga from "#/assets/images/investors/tioga.png"

From 0480c84c3b87185ae1f38d037bcf9ebd94c59a87 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 23:51:46 +0100
Subject: [PATCH 31/33] fix(site): stop mouse on leave bottom

---
 site/src/lib/matrix-cover.ts    | 44 ++++++++++++++++++++++++---------
 site/src/pages/blog/index.astro |  1 -
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/site/src/lib/matrix-cover.ts b/site/src/lib/matrix-cover.ts
index a3e293cb8c..25d1cd1ec1 100644
--- a/site/src/lib/matrix-cover.ts
+++ b/site/src/lib/matrix-cover.ts
@@ -337,17 +337,16 @@ function initWebGL() {
       const elapsed = performance.now() - rotationStartTime
       const progress = Math.min(elapsed / ROTATION_DURATION, 1)
 
-      let easeProgress
+      let easeProgress: number
       if (progress < 0.5) {
         // Ease-in (start slow, accelerate)
-        easeProgress = Math.pow(progress * 2, EASE_POWER) / 2
+        easeProgress = (progress * 2) ** EASE_POWER / 2
       } else {
         // Ease-out (decelerate to end)
-        easeProgress = 1 - Math.pow(2 - progress * 2, EASE_POWER) / 2
+        easeProgress = 1 - (2 - progress * 2) ** EASE_POWER / 2
       }
 
-      currentPlaneRotation =
-        currentPlaneRotation + (targetPlaneRotation - currentPlaneRotation) * easeProgress
+      currentPlaneRotation += (targetPlaneRotation - currentPlaneRotation) * easeProgress
 
       if (progress >= 1) {
         isRotating = false
@@ -356,8 +355,8 @@ function initWebGL() {
     }
 
     // Smooth out mouse movement
-    mouseX += (targetMouseX - mouseX) * 0.1
-    mouseY += (targetMouseY - mouseY) * 0.1
+    mouseX += (targetMouseX - mouseX) * 0.5
+    mouseY += (targetMouseY - mouseY) * 0.5
 
     // Set up camera view
     glMatrix.mat4.translate(cameraMatrix, cameraMatrix, [0, 0, -16])
@@ -521,17 +520,40 @@ function initWebGL() {
   // Update mouse position
   function updateMousePosition(event) {
     const rect = canvas.getBoundingClientRect()
-    targetMouseX = ((event.clientX - rect.left) / canvas.width) * 4 - 1
-    targetMouseY = -(((event.clientY - rect.top) / canvas.height) * 4) + 1
+    const normalizedX = ((event.clientX - rect.left) / canvas.width) * 4 - 1
+    const normalizedY = -(((event.clientY - rect.top) / canvas.height) * 4) + 1
+
+    // Check if mouse is below the canvas
+    if (event.clientY > rect.bottom) {
+      // Reset to default camera position
+      targetMouseX = 0
+      targetMouseY = 0
+    } else {
+      targetMouseX = normalizedX
+      targetMouseY = normalizedY
+    }
+  }
+
+  // Add mouseleave handler
+  function handleMouseLeave(event) {
+    const rect = canvas.getBoundingClientRect()
+    if (event.clientY > rect.bottom) {
+      targetMouseX = 0
+      targetMouseY = 0
+    }
   }
 
   document.addEventListener("mousemove", updateMousePosition)
+  canvas.addEventListener("mouseleave", handleMouseLeave)
 
-  // Cleanup function
   return () => {
-    canvas.removeEventListener("mousemove", updateMousePosition)
+    document.removeEventListener("mousemove", updateMousePosition)
+    canvas.removeEventListener("mouseleave", handleMouseLeave)
   }
 }
 
 // Initialize WebGL when the component mounts
 document.addEventListener("DOMContentLoaded", initWebGL)
+
+// Initialize WebGL when the component mounts
+document.addEventListener("DOMContentLoaded", initWebGL)
diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
index 8c26f653a3..fb7eeb72d7 100644
--- a/site/src/pages/blog/index.astro
+++ b/site/src/pages/blog/index.astro
@@ -2,7 +2,6 @@
 import Card from "#/components/Card.astro"
 import type { BlogPost } from "#/lib/types.ts"
 import H3 from "#/components/typography/h3.astro"
-import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import { saneDateTime, toISODate } from "#/lib/utilities.ts"
 import { contentfulClient } from "#/lib/contentful/client.ts"
 import AnimationLayout from "../../layouts/AnimationLayout.astro"

From c20c4363f1f8cdcd8bae38af7990ba28085b62b7 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Tue, 29 Oct 2024 23:59:01 +0100
Subject: [PATCH 32/33] fix(site): merge into one layout

---
 .../sections/landing/BorderIntro.astro        | 156 ------------------
 site/src/layouts/AnimationLayout.astro        | 149 ++++++++++++++++-
 2 files changed, 147 insertions(+), 158 deletions(-)
 delete mode 100644 site/src/components/sections/landing/BorderIntro.astro

diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
deleted file mode 100644
index ef46cda4a2..0000000000
--- a/site/src/components/sections/landing/BorderIntro.astro
+++ /dev/null
@@ -1,156 +0,0 @@
----
-import MatrixCover from "../../MatrixCover.astro"
-import H1 from "../../typography/h1.astro"
-import TextP from "../../typography/TextP.astro"
-
-interface Props {
-  title: string
-  text: string
-}
-
-const { title, text } = Astro.props
-
-const slideTextAnimation = {
-  forwards: {
-    old: {
-      name: "slideOutLeft",
-      duration: "0.4s",
-      easing: "ease-out",
-      fillMode: "forwards"
-    },
-    new: {
-      name: "slideInRight",
-      duration: "0.4s",
-      easing: "ease-out",
-      fillMode: "forwards"
-    }
-  }
-}
----
-
-<div class="header-grid">
-  <div class="shiny-border">
-    <div class="glow-effect" transition:persist></div>
-  </div>
-  <MatrixCover />
-  <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
-    <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
-      <H1>{title}</H1>
-      <TextP>{text}</TextP>
-    </div>
-  </div>
-</div>
-
-<style lang="postcss" is:global>
-    .header-grid {
-        --outer-border: 8px;
-        --inner-border: 5px;
-        --header-height: 68px;
-        height: calc(100vh - var(--header-height));
-        min-height: 400px;
-        width: 100%;
-        display: grid;
-        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
-        grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
-        position: relative;
-        overflow: hidden;
-    }
-
-    .glow-effect {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-        background: conic-gradient(
-                from 0deg at 50% 50%,
-                rgba(160, 236, 253, 1) 15deg,
-                rgba(160, 236, 253, 0) 15deg,
-                rgba(160, 236, 253, 0) 55deg,
-                rgba(160, 236, 253, 0) 345deg,
-                rgba(160, 236, 253, 1) 345deg
-        );
-        mix-blend-mode: screen;
-        filter: blur(10px);
-        transform-origin: center;
-    }
-
-    .shiny-border {
-        background-color: #262626;
-        grid-area: 2 / 2 / 7 / 7;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .header-grid > canvas {
-        grid-area: 3 / 3 / 6 / 6;
-        background-color: transparent;
-        z-index: 3;
-    }
-
-    .header-text-content {
-        grid-area: 4 / 3 / 5 / 6;
-        z-index: 4;
-    }
-</style>
-
-<script>
-  import {rotateCamera} from "../../../lib/matrix-cover";
-
-  document.addEventListener('astro:after-preparation', (e) => {
-    rotateCamera();
-  });
-
-  let headerGrid;
-  let glowEffect;
-  let previousAngle = 0;
-  let currentRotation = 0;
-  let mouseMoveHandler;
-
-  function initializeGlowEffect() {
-    headerGrid = document.querySelector('.header-grid');
-    glowEffect = document.querySelector('.glow-effect');
-
-    if (headerGrid && glowEffect) {
-      mouseMoveHandler = (e) => {
-        const rect = headerGrid.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-
-        const deltaX = e.clientX - centerX;
-        const deltaY = e.clientY - centerY;
-        const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
-
-        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-        const scale = Math.max(4, (distance / rect.height) * 8);
-
-        let angleDiff = newAngle - previousAngle;
-
-        if (angleDiff > 180) {
-          angleDiff -= 360;
-        } else if (angleDiff < -180) {
-          angleDiff += 360;
-        }
-
-        currentRotation += angleDiff;
-        previousAngle = newAngle;
-
-        glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
-      };
-
-      headerGrid.addEventListener('mousemove', mouseMoveHandler);
-    }
-  }
-
-  function cleanup() {
-    if (headerGrid && mouseMoveHandler) {
-      headerGrid.removeEventListener('mousemove', mouseMoveHandler);
-    }
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    cleanup();
-    initializeGlowEffect();
-  });
-
-  document.addEventListener('astro:before-preparation', cleanup);
-</script>
\ No newline at end of file
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
index f47dba4820..fccae0acac 100644
--- a/site/src/layouts/AnimationLayout.astro
+++ b/site/src/layouts/AnimationLayout.astro
@@ -1,7 +1,9 @@
 ---
 import Layout from "#/layouts/Layout.astro"
-import BorderIntro from "../components/sections/landing/BorderIntro.astro"
 import { ClientRouter } from "astro:transitions"
+import TextP from "../components/typography/TextP.astro"
+import H1 from "../components/typography/h1.astro"
+import MatrixCover from "../components/MatrixCover.astro"
 
 interface Props {
   title: any
@@ -9,6 +11,23 @@ interface Props {
 }
 
 const { title, text } = Astro.props
+
+const slideTextAnimation = {
+  forwards: {
+    old: {
+      name: "slideOutLeft",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    },
+    new: {
+      name: "slideInRight",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    }
+  }
+}
 ---
 
 <head>
@@ -16,7 +35,133 @@ const { title, text } = Astro.props
 </head>
 
 <Layout title="Union">
-  <BorderIntro {title} {text}/>
+  <div class="header-grid">
+    <div class="shiny-border">
+      <div class="glow-effect" transition:persist></div>
+    </div>
+    <MatrixCover />
+    <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
+      <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
+        <H1>{title}</H1>
+        <TextP>{text}</TextP>
+      </div>
+    </div>
+  </div>
   <slot/>
 </Layout>
 
+
+<style lang="postcss" is:global>
+    .header-grid {
+        --outer-border: 8px;
+        --inner-border: 5px;
+        --header-height: 68px;
+        height: calc(100vh - var(--header-height));
+        min-height: 400px;
+        width: 100%;
+        display: grid;
+        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .glow-effect {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        background: conic-gradient(
+                from 0deg at 50% 50%,
+                rgba(160, 236, 253, 1) 15deg,
+                rgba(160, 236, 253, 0) 15deg,
+                rgba(160, 236, 253, 0) 55deg,
+                rgba(160, 236, 253, 0) 345deg,
+                rgba(160, 236, 253, 1) 345deg
+        );
+        mix-blend-mode: screen;
+        filter: blur(10px);
+        transform-origin: center;
+    }
+
+    .shiny-border {
+        background-color: #262626;
+        grid-area: 2 / 2 / 7 / 7;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .header-grid > canvas {
+        grid-area: 3 / 3 / 6 / 6;
+        background-color: transparent;
+        z-index: 3;
+    }
+
+    .header-text-content {
+        grid-area: 4 / 3 / 5 / 6;
+        z-index: 4;
+    }
+</style>
+
+<script>
+  import {rotateCamera} from "../lib/matrix-cover";
+
+  document.addEventListener('astro:after-preparation', (e) => {
+    rotateCamera();
+  });
+
+  let headerGrid;
+  let glowEffect;
+  let previousAngle = 0;
+  let currentRotation = 0;
+  let mouseMoveHandler;
+
+  function initializeGlowEffect() {
+    headerGrid = document.querySelector('.header-grid');
+    glowEffect = document.querySelector('.glow-effect');
+
+    if (headerGrid && glowEffect) {
+      mouseMoveHandler = (e) => {
+        const rect = headerGrid.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        const deltaX = e.clientX - centerX;
+        const deltaY = e.clientY - centerY;
+        const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const scale = Math.max(4, (distance / rect.height) * 8);
+
+        let angleDiff = newAngle - previousAngle;
+
+        if (angleDiff > 180) {
+          angleDiff -= 360;
+        } else if (angleDiff < -180) {
+          angleDiff += 360;
+        }
+
+        currentRotation += angleDiff;
+        previousAngle = newAngle;
+
+        glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
+      };
+
+      headerGrid.addEventListener('mousemove', mouseMoveHandler);
+    }
+  }
+
+  function cleanup() {
+    if (headerGrid && mouseMoveHandler) {
+      headerGrid.removeEventListener('mousemove', mouseMoveHandler);
+    }
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    cleanup();
+    initializeGlowEffect();
+  });
+
+  document.addEventListener('astro:before-preparation', cleanup);
+</script>
+

From b97e9ad0adb33ba2941606d4cbbd5249a14caa88 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Wed, 30 Oct 2024 00:00:13 +0100
Subject: [PATCH 33/33] fix(site): thinner border

---
 site/src/layouts/AnimationLayout.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
index fccae0acac..95a17ceda2 100644
--- a/site/src/layouts/AnimationLayout.astro
+++ b/site/src/layouts/AnimationLayout.astro
@@ -54,7 +54,7 @@ const slideTextAnimation = {
 <style lang="postcss" is:global>
     .header-grid {
         --outer-border: 8px;
-        --inner-border: 5px;
+        --inner-border: 2px;
         --header-height: 68px;
         height: calc(100vh - var(--header-height));
         min-height: 400px;