feat: some shit

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { createLeaves, setRotation } from "./leaves";
+
+  let canvas: HTMLCanvasElement;
+
+  let loaded = false;
+
+  function handleScroll() {
+    setRotation(window.scrollY / window.innerHeight);
+  }
+
+  onMount(() => {
+    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1 });
+    setTimeout(() => {
+      loaded = true;
+    }, 100);
+  });
+</script>
+
+<svelte:window on:scroll={handleScroll} />
+
+<canvas bind:this={canvas} class:loaded />
+
+<style>
+  :global(body) {
+    z-index: 1;
+  }
+  canvas {
+    width: 100vw !important;
+    height: 100vh !important;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 2s;
+  }
+
+  .loaded {
+    opacity: 0.2;
+  }
+</style>