feat: some stuff

src/content/projects/plantarium/_components/Leaves.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { createLeaves, setRotation } from "./leaves";
+  import { Color } from "ogl";
+  import { rgbToHex } from "@helpers/colors";
 
   let canvas: HTMLCanvasElement;
 
@@ -10,8 +12,17 @@
     setRotation(window.scrollY / window.innerHeight);
   }
 
+  const color = new Color("#000000");
+
+  const updateBackgroundColor = () => {
+    const background = window.getComputedStyle(document.body);
+    const d = new Color(rgbToHex(background.backgroundColor));
+    color.set(d.r, d.g, d.b);
+  };
+
   onMount(() => {
-    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1 });
+    updateBackgroundColor();
+    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1, color });
     setTimeout(() => {
       loaded = true;
     }, 100);
@@ -19,6 +30,7 @@
 </script>
 
 <svelte:window on:scroll={handleScroll} />
+<svelte:body on:transitionend={updateBackgroundColor} />
 
 <canvas bind:this={canvas} class:loaded />