Minor changes

src/lib/Cube3D.css

@@ -0,0 +1,86 @@
+/* .rotate1{
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+} */
+/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
+
+#cube-3d-container {
+  width: var(--cube-size);
+  height: var(--cube-size);
+  position: relative;
+  perspective: 500px;
+  -moz-perspective: 1000px;
+  padding: 25px;
+}
+
+#cube3d {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0,1.32,0,.92);
+}
+
+#cube3d div {
+  display: block;
+  border: none;
+  line-height: var(--cube-size);
+  text-align: center;
+  font-size: 65px;
+}
+
+.cube-sides {
+  position: absolute;
+  width: var(--cube-size);
+  height: var(--cube-size);
+
+  text-decoration: underline;
+  text-underline-offset: 24px;
+}
+
+/* #front {
+} */
+/*
+#back {
+  background: var(--cube-color);
+}
+
+#right {
+  background: var(--cube-color);
+}
+
+#left {
+  background: var(--cube-color);
+}
+
+#top {
+  background: var(--cube-color);
+}
+
+#bottom {
+  background: var(--cube-color);
+} */
+
+#cube3d #front  {
+  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #back {
+  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+}
+#cube3d #right  {
+  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #left   {
+  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+/* #cube3d #top    {
+  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #bottom {
+  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+} */

src/lib/Cube3D.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import planeImg from './images/PlaneGrid.png';
+    import cubeSideImg from './images/CubeTexture.png';
+
+    // Hyperparameters (fine to change)
+    let startPosAnim: number = 1200; // Starts at scroll value
+    let endPosAnim: number = 4000; // Ends at scroll value
+    let parallexOutPadding = 700;
+    let parallaxOutLength = 400; // How long the exit anim is
+
+
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let cubeRotY: number = 0;
+    let cubeRotX: number = 0;
+
+    // Total length of animation
+    let totalAnimLength: number = endPosAnim - startPosAnim;
+
+    // Front side text after fully scrolled
+    let frontSideText: string[] = ["overlooked", "DEPRIVED"];
+
+    function updateUI(){
+        // Calculates the cube roation
+        let time = (scrollPos - startPosAnim)/totalAnimLength;
+        cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);
+
+        // Start exit anim after main anim
+        time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
+        cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);
+
+        // if rotated cube 180deg then change text
+        let frontSide = document.getElementById('front');
+        if (!!frontSide) // if not null
+        {
+            if (scrollPos - startPosAnim < totalAnimLength / 2){
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
+            }
+            else {
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
+            }
+        }
+
+        // Hide plane3d if plane3d turned pass camera
+        let plane3d = document.getElementById('plane3D');
+        if (!!plane3d) // if not null
+        {
+            if (cubeRotX <= 10){
+                plane3d.classList.remove("hide");
+            }
+            else{
+                plane3d.classList.add("hide");
+            }
+        }
+    }
+
+    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} on:scroll={updateUI}/>
+
+<style>
+  @import './Cube3D.css';
+
+    :root {
+        --cube-size: 400px;
+        --cube-color: rgba(125, 125, 125, 1);
+    }
+
+  #plane3D {
+    --plane-size: 2500px;
+
+    width: var(--plane-size);
+    height: var(--plane-size);
+
+    position: absolute;
+
+    transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    -moz-transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    }
+
+    .image {
+        transform: translateX(calc(var(--cube-size)*-0.5));
+    }
+
+    .text{
+        margin: 0;
+    }
+</style>
+
+<div id="cube-3d-container">
+    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({cubeRotX}deg);">
+        <div id="front" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                overlooked
+            </p>
+        </div>
+
+        <div id="back" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                constrained
+            </p>
+        </div>
+
+        <div id="right" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                drained
+            </p>
+        </div>
+
+        <div id="left" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                underfunded
+            </p>
+        </div>
+
+        <!-- <div id="top" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            5
+        </div>
+
+        <div id="bottom" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            6
+        </div> -->
+
+        
+
+        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
+    </div>
+
+</div>

src/lib/ScrollTextComponent.svelte

@@ -66,20 +66,6 @@
         margin:auto;
         z-index: 0;
     }
-
-    .big-text {
-        font-size: 100px;
-        pointer-events: none;
-    }
-
-    .no-wrap {
-        text-wrap: nowrap;
-        white-space: nowrap;
-    }
-
-    .no-interact {
-        pointer-events: none;
-    }
 </style>
 
 <div style="height: 100vh;">

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>