feat: track images with git lfs

src/content/blog/zentralwerk_2051/Fishes.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import createFishes from "./fishes/webgl-fishes";
+  import { Color } from "ogl";
+
+  let canvasBottom: HTMLCanvasElement;
+
+  let speed = 0;
+  let timeOffset = Math.random() * 100000;
+
+  let fishCanvasBack: { resize: any; update: any };
+  let render = true;
+
+  const color = new Color("#ffffff");
+
+  const handleResize = () => {
+    fishCanvasBack.resize();
+
+    render = window.innerWidth > 500;
+  };
+
+  const updateBackgroundColor = () => {
+    const background = window.getComputedStyle(document.body);
+    const d = new Color(rgbToHex(background.backgroundColor));
+    color.set(d.r, d.g, d.b);
+    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("")
+    );
+  }
+
+  onMount(async () => {
+    const background = window.getComputedStyle(document.body);
+    const d = new Color(rgbToHex(background.backgroundColor));
+    color.set(d.r, d.g, d.b);
+
+    fishCanvasBack = createFishes(canvasBottom, { amount: 100, color });
+
+    fishCanvasBack.resize();
+
+    requestAnimationFrame(update);
+    function update(t) {
+      requestAnimationFrame(update);
+      speed *= 0.99;
+      render && fishCanvasBack.update(t, timeOffset);
+    }
+  });
+</script>
+
+<svelte:body on:transitionend={updateBackgroundColor} />
+
+<svelte:window
+  on:resize={handleResize}
+  on:scroll={() => {
+    speed = Math.min(speed + 0.001, 0.15);
+    timeOffset += speed;
+  }}
+/>
+
+<canvas id="bottom" bind:this={canvasBottom} />
+
+<!-- <canvas id="top" bind:this={canvasTop} /> -->
+<style>
+  canvas {
+    width: 100% !important;
+    height: unset !important;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: -1;
+    opacity: 0.5;
+  }
+</style>