atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added 404
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m13s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2026-01-25 00:27:35 -07:00
parent 74304dba4d
commit 9518a0f18b
1 changed files with 265 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

491
src/components/FuzzyText.vue
View File

@@ -1,275 +1,314 @@
<!-- Credit for this to https://vue-bits.dev/text-animations/fuzzy-text -->
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue'; import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from "vue";
interface FuzzyTextProps { interface FuzzyTextProps {
text: string; text: string;
fontSize?: number | string; fontSize?: number | string;
fontWeight?: string | number; fontWeight?: string | number;
fontFamily?: string; fontFamily?: string;
color?: string; color?: string;
enableHover?: boolean; enableHover?: boolean;
baseIntensity?: number; baseIntensity?: number;
hoverIntensity?: number; hoverIntensity?: number;
} }
const props = withDefaults(defineProps<FuzzyTextProps>(), { const props = withDefaults(defineProps<FuzzyTextProps>(), {
text: '', text: "",
fontSize: 'clamp(2rem, 8vw, 8rem)', fontSize: "clamp(2rem, 8vw, 8rem)",
fontWeight: 900, fontWeight: 900,
fontFamily: 'inherit', fontFamily: "inherit",
color: '#fff', color: "#fff",
enableHover: true, enableHover: true,
baseIntensity: 0.18, baseIntensity: 0.18,
hoverIntensity: 0.5 hoverIntensity: 0.5,
}); });
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef'); const canvasRef = useTemplateRef<HTMLCanvasElement>("canvasRef");
let animationFrameId: number; let animationFrameId: number;
let isCancelled = false; let isCancelled = false;
let cleanup: (() => void) | null = null; let cleanup: (() => void) | null = null;
const waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => { const waitForFont = async (
if (document.fonts?.check) { fontFamily: string,
const fontString = `${fontWeight} ${fontSize} ${fontFamily}`; fontWeight: string | number,
fontSize: string,
): Promise<boolean> => {
if (document.fonts?.check) {
const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;
if (document.fonts.check(fontString)) { if (document.fonts.check(fontString)) {
return true; return true;
}
try {
await document.fonts.load(fontString);
return document.fonts.check(fontString);
} catch (error) {
console.warn("Font loading failed:", error);
return false;
}
} }
try { return new Promise((resolve) => {
await document.fonts.load(fontString); const canvas = document.createElement("canvas");
return document.fonts.check(fontString); const ctx = canvas.getContext("2d");
} catch (error) { if (!ctx) {
console.warn('Font loading failed:', error); resolve(false);
return false; return;
} }
}
return new Promise(resolve => { ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
const canvas = document.createElement('canvas'); const testWidth = ctx.measureText("M").width;
const ctx = canvas.getContext('2d');
if (!ctx) {
resolve(false);
return;
}
ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`; let attempts = 0;
const testWidth = ctx.measureText('M').width; const checkFont = () => {
ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
const newWidth = ctx.measureText("M").width;
let attempts = 0; if (newWidth !== testWidth && newWidth > 0) {
const checkFont = () => { resolve(true);
ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`; } else if (attempts < 20) {
const newWidth = ctx.measureText('M').width; attempts++;
setTimeout(checkFont, 50);
} else {
resolve(false);
}
};
if (newWidth !== testWidth && newWidth > 0) { setTimeout(checkFont, 10);
resolve(true); });
} else if (attempts < 20) {
attempts++;
setTimeout(checkFont, 50);
} else {
resolve(false);
}
};
setTimeout(checkFont, 10);
});
}; };
const initCanvas = async () => { const initCanvas = async () => {
if (document.fonts?.ready) { if (document.fonts?.ready) {
await document.fonts.ready; await document.fonts.ready;
} }
if (isCancelled) return;
const canvas = canvasRef.value;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const computedFontFamily =
props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;
const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;
let numericFontSize: number;
if (typeof props.fontSize === 'number') {
numericFontSize = props.fontSize;
} else {
const temp = document.createElement('span');
temp.style.fontSize = props.fontSize;
temp.style.fontFamily = computedFontFamily;
document.body.appendChild(temp);
const computedSize = window.getComputedStyle(temp).fontSize;
numericFontSize = parseFloat(computedSize);
document.body.removeChild(temp);
}
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 offCtx = offscreen.getContext('2d');
if (!offCtx) return;
const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
offCtx.font = fontString;
const testMetrics = offCtx.measureText('M');
if (testMetrics.width === 0) {
setTimeout(() => {
if (!isCancelled) {
initCanvas();
}
}, 100);
return;
}
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 textBoundingWidth = Math.ceil(actualLeft + actualRight);
const tightHeight = Math.ceil(actualAscent + actualDescent);
const extraWidthBuffer = 10;
const offscreenWidth = textBoundingWidth + extraWidthBuffer;
offscreen.width = offscreenWidth;
offscreen.height = tightHeight;
const xOffset = extraWidthBuffer / 2;
offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
offCtx.textBaseline = 'alphabetic';
offCtx.fillStyle = props.color;
offCtx.fillText(text, xOffset - actualLeft, actualAscent);
const horizontalMargin = 50;
const verticalMargin = 0;
canvas.width = offscreenWidth + horizontalMargin * 2;
canvas.height = tightHeight + verticalMargin * 2;
ctx.translate(horizontalMargin, verticalMargin);
const interactiveLeft = horizontalMargin + xOffset;
const interactiveTop = verticalMargin;
const interactiveRight = interactiveLeft + textBoundingWidth;
const interactiveBottom = interactiveTop + tightHeight;
let isHovering = false;
const fuzzRange = 30;
const run = () => {
if (isCancelled) return; if (isCancelled) return;
ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
const intensity = isHovering ? props.hoverIntensity : props.baseIntensity; const canvas = canvasRef.value;
for (let j = 0; j < tightHeight; j++) { if (!canvas) return;
const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1); const ctx = canvas.getContext("2d");
if (!ctx) return;
const computedFontFamily =
props.fontFamily === "inherit"
? window.getComputedStyle(canvas).fontFamily || "sans-serif"
: props.fontFamily;
const fontSizeStr =
typeof props.fontSize === "number"
? `${props.fontSize}px`
: props.fontSize;
let numericFontSize: number;
if (typeof props.fontSize === "number") {
numericFontSize = props.fontSize;
} else {
const temp = document.createElement("span");
temp.style.fontSize = props.fontSize;
temp.style.fontFamily = computedFontFamily;
document.body.appendChild(temp);
const computedSize = window.getComputedStyle(temp).fontSize;
numericFontSize = parseFloat(computedSize);
document.body.removeChild(temp);
} }
animationFrameId = window.requestAnimationFrame(run);
};
run(); const fontLoaded = await waitForFont(
computedFontFamily,
props.fontWeight,
fontSizeStr,
);
if (!fontLoaded) {
console.warn(`Font not loaded: ${computedFontFamily}`);
}
const isInsideTextArea = (x: number, y: number) => const text = props.text;
x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
const handleMouseMove = (e: MouseEvent) => { const offscreen = document.createElement("canvas");
if (!props.enableHover) return; const offCtx = offscreen.getContext("2d");
const rect = canvas.getBoundingClientRect(); if (!offCtx) return;
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
isHovering = isInsideTextArea(x, y);
};
const handleMouseLeave = () => { const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
isHovering = false; offCtx.font = fontString;
};
const handleTouchMove = (e: TouchEvent) => { const testMetrics = offCtx.measureText("M");
if (!props.enableHover) return; if (testMetrics.width === 0) {
e.preventDefault(); setTimeout(() => {
const rect = canvas.getBoundingClientRect(); if (!isCancelled) {
const touch = e.touches[0]; initCanvas();
const x = touch.clientX - rect.left; }
const y = touch.clientY - rect.top; }, 100);
isHovering = isInsideTextArea(x, y); return;
}; }
const handleTouchEnd = () => { offCtx.textBaseline = "alphabetic";
isHovering = false; const metrics = offCtx.measureText(text);
};
if (props.enableHover) { const actualLeft = metrics.actualBoundingBoxLeft ?? 0;
canvas.addEventListener('mousemove', handleMouseMove); const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
canvas.addEventListener('mouseleave', handleMouseLeave); const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); const actualDescent =
canvas.addEventListener('touchend', handleTouchEnd); metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
}
const textBoundingWidth = Math.ceil(actualLeft + actualRight);
const tightHeight = Math.ceil(actualAscent + actualDescent);
const extraWidthBuffer = 10;
const offscreenWidth = textBoundingWidth + extraWidthBuffer;
offscreen.width = offscreenWidth;
offscreen.height = tightHeight;
const xOffset = extraWidthBuffer / 2;
offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
offCtx.textBaseline = "alphabetic";
offCtx.fillStyle = props.color;
offCtx.fillText(text, xOffset - actualLeft, actualAscent);
const horizontalMargin = 50;
const verticalMargin = 0;
canvas.width = offscreenWidth + horizontalMargin * 2;
canvas.height = tightHeight + verticalMargin * 2;
ctx.translate(horizontalMargin, verticalMargin);
const interactiveLeft = horizontalMargin + xOffset;
const interactiveTop = verticalMargin;
const interactiveRight = interactiveLeft + textBoundingWidth;
const interactiveBottom = interactiveTop + tightHeight;
let isHovering = false;
const fuzzRange = 30;
const run = () => {
if (isCancelled) return;
ctx.clearRect(
-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,
);
ctx.drawImage(
offscreen,
0,
j,
offscreenWidth,
1,
dx,
j,
offscreenWidth,
1,
);
}
animationFrameId = window.requestAnimationFrame(run);
};
run();
const isInsideTextArea = (x: number, y: number) =>
x >= interactiveLeft &&
x <= interactiveRight &&
y >= interactiveTop &&
y <= interactiveBottom;
const handleMouseMove = (e: MouseEvent) => {
if (!props.enableHover) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
isHovering = isInsideTextArea(x, y);
};
const handleMouseLeave = () => {
isHovering = false;
};
const handleTouchMove = (e: TouchEvent) => {
if (!props.enableHover) return;
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
isHovering = isInsideTextArea(x, y);
};
const handleTouchEnd = () => {
isHovering = false;
};
cleanup = () => {
window.cancelAnimationFrame(animationFrameId);
if (props.enableHover) { if (props.enableHover) {
canvas.removeEventListener('mousemove', handleMouseMove); canvas.addEventListener("mousemove", handleMouseMove);
canvas.removeEventListener('mouseleave', handleMouseLeave); canvas.addEventListener("mouseleave", handleMouseLeave);
canvas.removeEventListener('touchmove', handleTouchMove); canvas.addEventListener("touchmove", handleTouchMove, {
canvas.removeEventListener('touchend', handleTouchEnd); passive: false,
});
canvas.addEventListener("touchend", handleTouchEnd);
} }
};
cleanup = () => {
window.cancelAnimationFrame(animationFrameId);
if (props.enableHover) {
canvas.removeEventListener("mousemove", handleMouseMove);
canvas.removeEventListener("mouseleave", handleMouseLeave);
canvas.removeEventListener("touchmove", handleTouchMove);
canvas.removeEventListener("touchend", handleTouchEnd);
}
};
}; };
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
initCanvas(); initCanvas();
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
isCancelled = true; isCancelled = true;
if (animationFrameId) { if (animationFrameId) {
window.cancelAnimationFrame(animationFrameId); window.cancelAnimationFrame(animationFrameId);
} }
if (cleanup) { if (cleanup) {
cleanup(); cleanup();
} }
}); });
watch( watch(
[ [
() => props.text, () => props.text,
() => props.fontSize, () => props.fontSize,
() => props.fontWeight, () => props.fontWeight,
() => props.fontFamily, () => props.fontFamily,
() => props.color, () => props.color,
() => props.enableHover, () => props.enableHover,
() => props.baseIntensity, () => props.baseIntensity,
() => props.hoverIntensity () => props.hoverIntensity,
], ],
() => { () => {
isCancelled = true; isCancelled = true;
if (animationFrameId) { if (animationFrameId) {
window.cancelAnimationFrame(animationFrameId); window.cancelAnimationFrame(animationFrameId);
} }
if (cleanup) { if (cleanup) {
cleanup(); cleanup();
} }
isCancelled = false; isCancelled = false;
nextTick(() => { nextTick(() => {
initCanvas(); initCanvas();
}); });
} },
); );
</script> </script>
<template> <template>
<canvas ref="canvasRef" /> <canvas ref="canvasRef" />
</template> </template>