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 />
 

src/content/projects/plantarium/_components/leaves.ts

@@ -3,7 +3,6 @@ import { rand, randMinMax } from "./random";
 
 import fragment from "./Leaf.frag";
 import vertex from "./Leaf.vert";
-import { rgbToHex } from '@helpers/colors';
 
 let rotation = 0;
 
@@ -11,14 +10,12 @@ export function setRotation(r: number) {
   rotation = r;
 }
 
-export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, alpha?: boolean, minZ?: number, maxZ?: number }) {
+export function createLeaves({ canvas, num = 20, color, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, color?: Color, minZ?: number, maxZ?: number }) {
 
 
   const renderer = new Renderer({ dpr: 1, canvas, alpha: true });
   const gl = renderer.gl;
 
-  const background = window.getComputedStyle(document.body);
-  const d = new Color(rgbToHex(background.backgroundColor));
 
   const camera = new Camera(gl, { fov: 15 });
   camera.position.z = 5;
@@ -40,7 +37,7 @@ export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ
     uniforms: {
       uTime: { value: 0 },
       uRot: { value: 0 },
-      uBackground: { value: d },
+      uBackground: { value: color },
     },
   });
 

src/content/projects/plantarium/index.mdx

@@ -27,6 +27,9 @@ import screenshot_geometry_nodes  from "./images/screenshot-geometry-nodes.jpg"
 import screenshot_houdini  from "./images/screenshot-houdini.jpg"
 import screenshot_unreal  from "./images/screenshot-unreal.jpg"
 import screenshot_davinci from "./images/screenshot-davinci.jpg"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Leaves client:load/>