Added 3d cube and run shell script

src/App.svelte

@@ -1,10 +1,50 @@
-<script>
+<script lang="ts">
   import svelteLogo from './assets/svelte.svg'
   import StartVideo from './assets/StartVideo.gif'
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
   import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
+  import ZSpacer from './lib/ZSpacer.svelte';
+
+  window.onload = function() {
+    window.scrollTo(0, 100);
+  };
+
+  let scrollPos: number = 0;
+  let rotation: number = 0;
+
+  let startPosAnim: number = 150;
+  let endPosAnim: number = 1600;
+
+  function rotateCube() {
+    //incremtent
+    rotation += 90;
+  }
+  
+
+  $: {
+    let time = (scrollPos - startPosAnim)/endPosAnim;
+    rotation = lerp(0, 360, clamp(time, 0, 1), true);
+    console.log(time + " -> " + rotation);
+  }
+
+
+  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} />
+
 <main>
   <div class="topnav">
     <a class="active" href="#home">Home</a>
@@ -13,7 +53,37 @@
     <a href="#about">About</a>
   </div> 
 
-  <!-- <ScrollTextComponent /> -->
+  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+    <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
+
+    <StickyLayer offset={{ top: 0, bottom: 2 }}>
+      <button on:click={rotateCube}>
+        Rotate
+      </button>
+
+      <div class="horizontal" style="padding: 200px;">
+        <div>
+          test {scrollPos}
+        </div>
+    
+        <ZSpacer/>
+    
+        <div id="cube-3d-container">
+          <div id="cube3d" style="transform:rotateY({rotation}deg);">
+            <div class="front">1</div>
+            <div class="back">2</div>
+            <div class="right">3</div>
+            <div class="left">4</div>
+            <div class="top">5</div>
+            <div class="bottom">6</div>
+          </div>
+        </div>
+      </div>
+    </StickyLayer>
+  </Parallax>
+
+  <!-- 
+  <ScrollTextComponent />
   <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
     <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
   
@@ -31,8 +101,11 @@
   
     <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
   </Parallax>
+  -->
+
 </main>
 
 <style>
+@import './cube3d.css';
 </style>