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>