Minor changes

src/lib/WeAreText.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import ZSpacer from "./Universal/ZSpacer.svelte";
+
+    // Hyperparams
+    let startExit = 4700;
+    let exitLength = 2000;
+    let exitScreenLength = 700;
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let extraPosY = 0;
+    let rotation = 0;
+
+    $:{
+        let time = (scrollPos - startExit) / exitLength;
+        extraPosY = lerp(0, -exitScreenLength, time, true);
+        rotation = lerp(0, 50, time, true);
+    }
+
+    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
+        const lerped: number = from + (to - from) * time;
+        
+        if (clamped) {
+        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
+        }
+
+        return lerped;
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} />
+
+<div class="horizontal">
+    <div id="WeAreHolder" style="margin-right: 45vw;">
+        <div style="transform: translate(0, {extraPosY}px) rotateX({rotation}deg);">    
+            <div class="no-wrap no-interact big-text align-center"
+            style="padding: -10px 10px 0px 10px;">
+                We are
+            </div>
+        </div>
+    </div>
+    <ZSpacer/>
+</div>
+
+<style>
+#WeAreHolder {
+    transition: transform 1s cubic-bezier(0,1.32,0,.92);
+    transform-style: preserve-3d;
+
+    perspective: 1000px;
+    -moz-perspective: 1000px;
+}
+
+#WeAreHolder div>div {
+    padding: 0px 30px -5px 30px;
+    /* border-radius: 40px; */
+    /* background: rgba(57, 57, 57, 0.201); */
+    /* border-bottom: 5px solid rgb(189, 189, 189); */
+
+}
+</style>