feat: some shit

src/content/blog/zentralwerk_2051/Fishes.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import createFishes from "./fishes/webgl-fishes";
   import { Color } from "ogl";
+  import { rgbToHex } from "@helpers/colors";
 
   let canvasBottom: HTMLCanvasElement;
 
@@ -26,20 +27,7 @@
     fishCanvasBack.resize();
   };
 
-  // function to turn css rgb() strings to hex
-  function rgbToHex(rgb: string) {
-    let hex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    if (!hex) return rgb;
-    return (
-      "#" +
-      hex
-        .slice(1)
-        .map((x) => {
-          return ("0" + parseInt(x).toString(16)).slice(-2);
-        })
-        .join("")
-    );
-  }
+  let loaded = false;
 
   onMount(async () => {
     const background = window.getComputedStyle(document.body);
@@ -56,6 +44,7 @@
       speed *= 0.99;
       render && fishCanvasBack.update(t, timeOffset);
     }
+    loaded = true;
   });
 </script>
 
@@ -69,7 +58,7 @@
   }}
 />
 
-<canvas id="bottom" bind:this={canvasBottom} />
+<canvas id="bottom" bind:this={canvasBottom} class:loaded />
 
 <!-- <canvas id="top" bind:this={canvasTop} /> -->
 <style>
@@ -80,6 +69,11 @@
     top: 0px;
     left: 0px;
     z-index: -1;
-    opacity: 0.5;
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+
+  canvas.loaded {
+    opacity: 0.2;
   }
 </style>