Added 404

src/components/FuzzyText.vue

@@ -1,5 +1,6 @@
+<!-- Credit for this to https://vue-bits.dev/text-animations/fuzzy-text -->
 <script setup lang="ts">
-import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from "vue";
 
 interface FuzzyTextProps {
     text: string;
@@ -13,22 +14,26 @@ interface FuzzyTextProps {
 }
 
 const props = withDefaults(defineProps<FuzzyTextProps>(), {
-  text: '',
+    text: "",
-  fontSize: 'clamp(2rem, 8vw, 8rem)',
+    fontSize: "clamp(2rem, 8vw, 8rem)",
     fontWeight: 900,
-  fontFamily: 'inherit',
+    fontFamily: "inherit",
-  color: '#fff',
+    color: "#fff",
     enableHover: true,
     baseIntensity: 0.18,
-  hoverIntensity: 0.5
+    hoverIntensity: 0.5,
 });
 
-const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
+const canvasRef = useTemplateRef<HTMLCanvasElement>("canvasRef");
 let animationFrameId: number;
 let isCancelled = false;
 let cleanup: (() => void) | null = null;
 
-const waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => {
+const waitForFont = async (
+    fontFamily: string,
+    fontWeight: string | number,
+    fontSize: string,
+): Promise<boolean> => {
     if (document.fonts?.check) {
         const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;
 
@@ -40,26 +45,26 @@ const waitForFont = async (fontFamily: string, fontWeight: string | number, font
             await document.fonts.load(fontString);
             return document.fonts.check(fontString);
         } catch (error) {
-      console.warn('Font loading failed:', error);
+            console.warn("Font loading failed:", error);
             return false;
         }
     }
 
-  return new Promise(resolve => {
+    return new Promise((resolve) => {
-    const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (!ctx) {
             resolve(false);
             return;
         }
 
         ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-    const testWidth = ctx.measureText('M').width;
+        const testWidth = ctx.measureText("M").width;
 
         let attempts = 0;
         const checkFont = () => {
             ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-      const newWidth = ctx.measureText('M').width;
+            const newWidth = ctx.measureText("M").width;
 
             if (newWidth !== testWidth && newWidth > 0) {
                 resolve(true);
@@ -85,19 +90,24 @@ const initCanvas = async () => {
     const canvas = canvasRef.value;
     if (!canvas) return;
 
-  const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     const computedFontFamily =
-    props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;
+        props.fontFamily === "inherit"
+            ? window.getComputedStyle(canvas).fontFamily || "sans-serif"
+            : props.fontFamily;
 
-  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;
+    const fontSizeStr =
+        typeof props.fontSize === "number"
+            ? `${props.fontSize}px`
+            : props.fontSize;
     let numericFontSize: number;
 
-  if (typeof props.fontSize === 'number') {
+    if (typeof props.fontSize === "number") {
         numericFontSize = props.fontSize;
     } else {
-    const temp = document.createElement('span');
+        const temp = document.createElement("span");
         temp.style.fontSize = props.fontSize;
         temp.style.fontFamily = computedFontFamily;
         document.body.appendChild(temp);
@@ -106,21 +116,25 @@ const initCanvas = async () => {
         document.body.removeChild(temp);
     }
 
-  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr);
+    const fontLoaded = await waitForFont(
+        computedFontFamily,
+        props.fontWeight,
+        fontSizeStr,
+    );
     if (!fontLoaded) {
         console.warn(`Font not loaded: ${computedFontFamily}`);
     }
 
     const text = props.text;
 
-  const offscreen = document.createElement('canvas');
+    const offscreen = document.createElement("canvas");
-  const offCtx = offscreen.getContext('2d');
+    const offCtx = offscreen.getContext("2d");
     if (!offCtx) return;
 
     const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
     offCtx.font = fontString;
 
-  const testMetrics = offCtx.measureText('M');
+    const testMetrics = offCtx.measureText("M");
     if (testMetrics.width === 0) {
         setTimeout(() => {
             if (!isCancelled) {
@@ -130,13 +144,14 @@ const initCanvas = async () => {
         return;
     }
 
-  offCtx.textBaseline = 'alphabetic';
+    offCtx.textBaseline = "alphabetic";
     const metrics = offCtx.measureText(text);
 
     const actualLeft = metrics.actualBoundingBoxLeft ?? 0;
     const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
     const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
-  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+    const actualDescent =
+        metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
 
     const textBoundingWidth = Math.ceil(actualLeft + actualRight);
     const tightHeight = Math.ceil(actualAscent + actualDescent);
@@ -149,7 +164,7 @@ const initCanvas = async () => {
 
     const xOffset = extraWidthBuffer / 2;
     offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
-  offCtx.textBaseline = 'alphabetic';
+    offCtx.textBaseline = "alphabetic";
     offCtx.fillStyle = props.color;
     offCtx.fillText(text, xOffset - actualLeft, actualAscent);
 
@@ -169,11 +184,30 @@ const initCanvas = async () => {
 
     const run = () => {
         if (isCancelled) return;
-    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
+        ctx.clearRect(
-    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;
+            -fuzzRange,
+            -fuzzRange,
+            offscreenWidth + 2 * fuzzRange,
+            tightHeight + 2 * fuzzRange,
+        );
+        const intensity = isHovering
+            ? props.hoverIntensity
+            : props.baseIntensity;
         for (let j = 0; j < tightHeight; j++) {
-      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
+            const dx = Math.floor(
-      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+                intensity * (Math.random() - 0.5) * fuzzRange,
+            );
+            ctx.drawImage(
+                offscreen,
+                0,
+                j,
+                offscreenWidth,
+                1,
+                dx,
+                j,
+                offscreenWidth,
+                1,
+            );
         }
         animationFrameId = window.requestAnimationFrame(run);
     };
@@ -181,7 +215,10 @@ const initCanvas = async () => {
     run();
 
     const isInsideTextArea = (x: number, y: number) =>
-    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
+        x >= interactiveLeft &&
+        x <= interactiveRight &&
+        y >= interactiveTop &&
+        y <= interactiveBottom;
 
     const handleMouseMove = (e: MouseEvent) => {
         if (!props.enableHover) return;
@@ -210,19 +247,21 @@ const initCanvas = async () => {
     };
 
     if (props.enableHover) {
-    canvas.addEventListener('mousemove', handleMouseMove);
+        canvas.addEventListener("mousemove", handleMouseMove);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
+        canvas.addEventListener("mouseleave", handleMouseLeave);
-    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
+        canvas.addEventListener("touchmove", handleTouchMove, {
-    canvas.addEventListener('touchend', handleTouchEnd);
+            passive: false,
+        });
+        canvas.addEventListener("touchend", handleTouchEnd);
     }
 
     cleanup = () => {
         window.cancelAnimationFrame(animationFrameId);
         if (props.enableHover) {
-      canvas.removeEventListener('mousemove', handleMouseMove);
+            canvas.removeEventListener("mousemove", handleMouseMove);
-      canvas.removeEventListener('mouseleave', handleMouseLeave);
+            canvas.removeEventListener("mouseleave", handleMouseLeave);
-      canvas.removeEventListener('touchmove', handleTouchMove);
+            canvas.removeEventListener("touchmove", handleTouchMove);
-      canvas.removeEventListener('touchend', handleTouchEnd);
+            canvas.removeEventListener("touchend", handleTouchEnd);
         }
     };
 };
@@ -252,7 +291,7 @@ watch(
         () => props.color,
         () => props.enableHover,
         () => props.baseIntensity,
-    () => props.hoverIntensity
+        () => props.hoverIntensity,
     ],
     () => {
         isCancelled = true;
@@ -266,7 +305,7 @@ watch(
         nextTick(() => {
             initCanvas();
         });
-  }
+    },
 );
 </script>