Started to create multiple 3D cubes for the background when scrolling. Stopping now

src/App.svelte

@@ -6,13 +6,47 @@
   import ZSpacer from './lib/Universal/ZSpacer.svelte';
   import Cube3D from './lib/Cube3D.svelte';
   import WeAreText from './lib/WeAreText.svelte';
+  import Cube3DCosmetic from './lib/Cube3DCosmetic.svelte';
+  import { onMount } from "svelte";
 
   window.onload = function() {
     window.scrollTo(0, 100); // Real
     //window.scrollTo(0, 3000); // debug
   };
 
+  function randomInt(min, max) { // min and max included 
+    return Math.floor(Math.random() * (max - min + 1) + min)
+  }
+
+  function progressToSection(prog: number): number{
+    return sections * prog
+  }
+
+  // Fields
   let scrollPos: number = 0;
+  let parallaxProgress: number = 0;
+  let cosCubesPositions: number[] = [];
+  
+  const handleProgress = (progress) => {
+    parallaxProgress = progress;
+    //console.log(progress);
+  };
+  
+  // Hyperparams
+  let sections: number = 10;
+  let cosmeticCubesSpawnRange: number[] = [0.0049253257070225615, 0.4404724075839424]; // Range relative to parallax progress
+  let numCosCubes: number = 10;
+
+
+  //Spawns the cosCubes
+  for (let i = 0; i < numCosCubes; i++) {
+    cosCubesPositions.push(randomInt(progressToSection(cosmeticCubesSpawnRange[0]),(progressToSection(cosmeticCubesSpawnRange[1]))));
+  }
+
+  function debugClick(){
+    console.log(progressToSection(cosmeticCubesSpawnRange[0]));
+    console.log(progressToSection(cosmeticCubesSpawnRange[1]));
+  }
 </script>
 
 <svelte:window bind:scrollY={scrollPos} />
@@ -25,13 +59,18 @@
     <a href="#about">About</a>
   </div> 
 
-  <Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
+  <Parallax 
+    onProgress={handleProgress}
+    bind:sections
+    config={{stiffness: 0.2, damping: 0.3}}
+    >
     <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
 
-    <StickyLayer offset={{ top: 0, bottom: 10 }} class="no-interact">
+    <StickyLayer offset={{ top: 0, bottom: 10 }}>
       <div>
         {scrollPos}
       </div>
+      <button on:click={debugClick}>Debug button</button>
     </StickyLayer>
 
     <StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
@@ -50,6 +89,10 @@
         The deprived devs
       </div>
     </StickyLayer>
+
+    {#each cosCubesPositions as cosCubePos}
+    <Cube3DCosmetic position={cosCubePos}/>
+    {/each}
   </Parallax>
 </main>
 

src/lib/Cube3DCosmetic.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { ParallaxLayer } from 'svelte-parallax';
+import cubeSideImg from './images/CubeTextureTransparent.png';
+
+    export let position: number;
+
+    let scrollPos: number = 0;
+
+    function updateUI(){
+
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
+
+<style>
+    :root {
+        --cube-cosmetic-size: 400px;
+        --cube-cosmetic-color: rgba(125, 125, 125, 1);
+    }
+
+    .image {
+        transform: translateX(calc(var(--cube-cosmetic-size)*-0.5));
+    }
+
+    #cube-3d-container {
+    width: var(--cube-cosmetic-size);
+    height: var(--cube-cosmetic-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-cosmetic-size);
+    text-align: center;
+    font-size: 65px;
+    }
+
+    .cube-sides {
+    position: absolute;
+    width: var(--cube-cosmetic-size);
+    height: var(--cube-cosmetic-size);
+
+    text-decoration: underline;
+    text-underline-offset: 24px;
+    }
+
+    #cube3d #front  {
+    transform: rotateY(0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    }
+    #cube3d #back {
+    transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
+    -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
+    }
+    #cube3d #right  {
+    transform: rotateY(  90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    }
+    #cube3d #left   {
+    transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    }
+    #cube3d #top    {
+    transform: rotateX(  90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    }
+    #cube3d #bottom {
+    transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
+    }
+</style>
+
+<ParallaxLayer offset={position}>
+    <div id="cube-3d-container">
+
+        <div id="cube3d" style="transform: rotateX(0deg)">
+            <div id="front" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+    
+            <div id="back" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+    
+            <div id="right" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+    
+            <div id="left" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+    
+            <div id="top" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+    
+            <div id="bottom" class="cube-sides">
+                <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            </div>
+            
+    
+        </div>
+    </div>
+</ParallaxLayer>