hanqin
2 days ago
12 changed files with 486 additions and 9 deletions
@ -0,0 +1,249 @@ |
|||
<script setup lang="ts"> |
|||
import { computed, onBeforeUnmount, onMounted, useSlots, useTemplateRef, watch } from 'vue'; |
|||
|
|||
interface FuzzyTextProps { |
|||
fontSize?: number | string; |
|||
fontWeight?: string | number; |
|||
fontFamily?: string; |
|||
color?: string; |
|||
enableHover?: boolean; |
|||
baseIntensity?: number; |
|||
hoverIntensity?: number; |
|||
fuzzRange?: number; |
|||
fps?: number; |
|||
direction?: 'horizontal' | 'vertical' | 'both'; |
|||
transitionDuration?: number; |
|||
clickEffect?: boolean; |
|||
glitchMode?: boolean; |
|||
glitchInterval?: number; |
|||
glitchDuration?: number; |
|||
gradient?: string[] | null; |
|||
letterSpacing?: number; |
|||
className?: string; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<FuzzyTextProps>(), { |
|||
fontSize: 'clamp(2rem, 8vw, 8rem)', |
|||
fontWeight: 900, |
|||
fontFamily: 'inherit', |
|||
color: '#fff', |
|||
enableHover: true, |
|||
baseIntensity: 0.18, |
|||
hoverIntensity: 0.5, |
|||
fuzzRange: 30, |
|||
fps: 60, |
|||
direction: 'horizontal', |
|||
transitionDuration: 0, |
|||
clickEffect: false, |
|||
glitchMode: false, |
|||
glitchInterval: 2000, |
|||
glitchDuration: 200, |
|||
gradient: null, |
|||
letterSpacing: 0, |
|||
className: '' |
|||
}); |
|||
|
|||
const canvasRef = useTemplateRef<HTMLCanvasElement & { cleanupFuzzyText?: () => void }>('canvasRef'); |
|||
const slots = useSlots(); |
|||
|
|||
let animationFrameId: number; |
|||
let glitchTimeoutId: ReturnType<typeof setTimeout>; |
|||
let glitchEndTimeoutId: ReturnType<typeof setTimeout>; |
|||
let clickTimeoutId: ReturnType<typeof setTimeout>; |
|||
let cancelled = false; |
|||
|
|||
const text = computed(() => (slots.default?.() ?? []).map(v => v.children).join('')); |
|||
|
|||
const init = async () => { |
|||
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; |
|||
|
|||
const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`; |
|||
|
|||
try { |
|||
await document.fonts.load(fontString); |
|||
} catch { |
|||
await document.fonts.ready; |
|||
} |
|||
|
|||
if (cancelled) return; |
|||
|
|||
let numericFontSize: number; |
|||
if (typeof props.fontSize === 'number') { |
|||
numericFontSize = props.fontSize; |
|||
} else { |
|||
const temp = document.createElement('span'); |
|||
temp.style.fontSize = props.fontSize; |
|||
document.body.appendChild(temp); |
|||
numericFontSize = parseFloat(getComputedStyle(temp).fontSize); |
|||
document.body.removeChild(temp); |
|||
} |
|||
|
|||
const offscreen = document.createElement('canvas'); |
|||
const offCtx = offscreen.getContext('2d')!; |
|||
offCtx.font = fontString; |
|||
offCtx.textBaseline = 'alphabetic'; |
|||
|
|||
let totalWidth = 0; |
|||
if (props.letterSpacing !== 0) { |
|||
for (const char of text.value) { |
|||
totalWidth += offCtx.measureText(char).width + props.letterSpacing; |
|||
} |
|||
totalWidth -= props.letterSpacing; |
|||
} else { |
|||
totalWidth = offCtx.measureText(text.value).width; |
|||
} |
|||
|
|||
const metrics = offCtx.measureText(text.value); |
|||
const ascent = metrics.actualBoundingBoxAscent ?? numericFontSize; |
|||
const descent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2; |
|||
const height = Math.ceil(ascent + descent); |
|||
|
|||
offscreen.width = Math.ceil(totalWidth) + 20; |
|||
offscreen.height = height; |
|||
|
|||
offCtx.font = fontString; |
|||
offCtx.textBaseline = 'alphabetic'; |
|||
|
|||
if (props.gradient && props.gradient.length >= 2) { |
|||
const grad = offCtx.createLinearGradient(0, 0, offscreen.width, 0); |
|||
props.gradient.forEach((c, i) => grad.addColorStop(i / (props.gradient!.length - 1), c)); |
|||
offCtx.fillStyle = grad; |
|||
} else { |
|||
offCtx.fillStyle = props.color; |
|||
} |
|||
|
|||
let x = 10; |
|||
for (const char of text.value) { |
|||
offCtx.fillText(char, x, ascent); |
|||
x += offCtx.measureText(char).width + props.letterSpacing; |
|||
} |
|||
|
|||
const marginX = props.fuzzRange + 20; |
|||
const marginY = props.direction === 'vertical' || props.direction === 'both' ? props.fuzzRange + 10 : 0; |
|||
|
|||
canvas.width = offscreen.width + marginX * 2; |
|||
canvas.height = offscreen.height + marginY * 2; |
|||
ctx.translate(marginX, marginY); |
|||
|
|||
let isHovering = false; |
|||
let isClicking = false; |
|||
let isGlitching = false; |
|||
let currentIntensity = props.baseIntensity; |
|||
let targetIntensity = props.baseIntensity; |
|||
let lastFrameTime = 0; |
|||
const frameDuration = 1000 / props.fps; |
|||
|
|||
const startGlitch = () => { |
|||
if (!props.glitchMode || cancelled) return; |
|||
glitchTimeoutId = setTimeout(() => { |
|||
isGlitching = true; |
|||
glitchEndTimeoutId = setTimeout(() => { |
|||
isGlitching = false; |
|||
startGlitch(); |
|||
}, props.glitchDuration); |
|||
}, props.glitchInterval); |
|||
}; |
|||
|
|||
if (props.glitchMode) startGlitch(); |
|||
|
|||
const run = (ts: number) => { |
|||
if (cancelled) return; |
|||
|
|||
if (ts - lastFrameTime < frameDuration) { |
|||
animationFrameId = requestAnimationFrame(run); |
|||
return; |
|||
} |
|||
|
|||
lastFrameTime = ts; |
|||
ctx.clearRect(-marginX, -marginY, offscreen.width + marginX * 2, offscreen.height + marginY * 2); |
|||
|
|||
targetIntensity = isClicking || isGlitching ? 1 : isHovering ? props.hoverIntensity : props.baseIntensity; |
|||
|
|||
if (props.transitionDuration > 0) { |
|||
const step = 1 / (props.transitionDuration / frameDuration); |
|||
currentIntensity += Math.sign(targetIntensity - currentIntensity) * step; |
|||
currentIntensity = Math.min( |
|||
Math.max(currentIntensity, Math.min(targetIntensity, currentIntensity)), |
|||
Math.max(targetIntensity, currentIntensity) |
|||
); |
|||
} else { |
|||
currentIntensity = targetIntensity; |
|||
} |
|||
|
|||
for (let y = 0; y < offscreen.height; y++) { |
|||
const dx = props.direction !== 'vertical' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange : 0; |
|||
const dy = |
|||
props.direction !== 'horizontal' ? (Math.random() - 0.5) * currentIntensity * props.fuzzRange * 0.5 : 0; |
|||
|
|||
ctx.drawImage(offscreen, 0, y, offscreen.width, 1, dx, y + dy, offscreen.width, 1); |
|||
} |
|||
|
|||
animationFrameId = requestAnimationFrame(run); |
|||
}; |
|||
|
|||
animationFrameId = requestAnimationFrame(run); |
|||
|
|||
const rectCheck = (x: number, y: number) => |
|||
x >= marginX && x <= marginX + offscreen.width && y >= marginY && y <= marginY + offscreen.height; |
|||
|
|||
const mouseMove = (e: MouseEvent) => { |
|||
if (!props.enableHover) return; |
|||
const rect = canvas.getBoundingClientRect(); |
|||
isHovering = rectCheck(e.clientX - rect.left, e.clientY - rect.top); |
|||
}; |
|||
|
|||
const mouseLeave = () => (isHovering = false); |
|||
|
|||
const click = () => { |
|||
if (!props.clickEffect) return; |
|||
isClicking = true; |
|||
clearTimeout(clickTimeoutId); |
|||
clickTimeoutId = setTimeout(() => (isClicking = false), 150); |
|||
}; |
|||
|
|||
if (props.enableHover) { |
|||
canvas.addEventListener('mousemove', mouseMove); |
|||
canvas.addEventListener('mouseleave', mouseLeave); |
|||
} |
|||
|
|||
if (props.clickEffect) { |
|||
canvas.addEventListener('click', click); |
|||
} |
|||
|
|||
onBeforeUnmount(() => { |
|||
cancelled = true; |
|||
cancelAnimationFrame(animationFrameId); |
|||
clearTimeout(glitchTimeoutId); |
|||
clearTimeout(glitchEndTimeoutId); |
|||
clearTimeout(clickTimeoutId); |
|||
canvas.removeEventListener('mousemove', mouseMove); |
|||
canvas.removeEventListener('mouseleave', mouseLeave); |
|||
canvas.removeEventListener('click', click); |
|||
}); |
|||
}; |
|||
|
|||
onMounted(init); |
|||
|
|||
watch( |
|||
() => ({ ...props, text: text.value }), |
|||
() => { |
|||
cancelled = true; |
|||
cancelAnimationFrame(animationFrameId); |
|||
cancelled = false; |
|||
init(); |
|||
} |
|||
); |
|||
</script> |
|||
|
|||
<template> |
|||
<canvas ref="canvasRef" :class="className" /> |
|||
</template> |
|||
@ -0,0 +1,176 @@ |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, onBeforeUnmount, watch, computed, useTemplateRef } from 'vue'; |
|||
import { gsap } from 'gsap'; |
|||
|
|||
interface TextTypeProps { |
|||
className?: string; |
|||
showCursor?: boolean; |
|||
hideCursorWhileTyping?: boolean; |
|||
cursorCharacter?: string; |
|||
cursorBlinkDuration?: number; |
|||
cursorClassName?: string; |
|||
text: string | string[]; |
|||
as?: string; |
|||
typingSpeed?: number; |
|||
initialDelay?: number; |
|||
pauseDuration?: number; |
|||
deletingSpeed?: number; |
|||
loop?: boolean; |
|||
textColors?: string[]; |
|||
variableSpeed?: { min: number; max: number }; |
|||
onSentenceComplete?: (sentence: string, index: number) => void; |
|||
startOnVisible?: boolean; |
|||
reverseMode?: boolean; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<TextTypeProps>(), { |
|||
as: 'div', |
|||
typingSpeed: 50, |
|||
initialDelay: 0, |
|||
pauseDuration: 2000, |
|||
deletingSpeed: 30, |
|||
loop: true, |
|||
className: '', |
|||
showCursor: true, |
|||
hideCursorWhileTyping: false, |
|||
cursorCharacter: '|', |
|||
cursorBlinkDuration: 0.5, |
|||
textColors: () => [], |
|||
startOnVisible: false, |
|||
reverseMode: false |
|||
}); |
|||
|
|||
const displayedText = ref(''); |
|||
const currentCharIndex = ref(0); |
|||
const isDeleting = ref(false); |
|||
const currentTextIndex = ref(0); |
|||
const isVisible = ref(!props.startOnVisible); |
|||
const cursorRef = useTemplateRef('cursorRef'); |
|||
const containerRef = useTemplateRef('containerRef'); |
|||
|
|||
const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text])); |
|||
|
|||
const getRandomSpeed = () => { |
|||
if (!props.variableSpeed) return props.typingSpeed; |
|||
const { min, max } = props.variableSpeed; |
|||
return Math.random() * (max - min) + min; |
|||
}; |
|||
|
|||
const getCurrentTextColor = () => { |
|||
if (!props.textColors.length) return '#ffffff'; |
|||
return props.textColors[currentTextIndex.value % props.textColors.length]; |
|||
}; |
|||
|
|||
let timeout: ReturnType<typeof setTimeout> | null = null; |
|||
|
|||
const clearTimeoutIfNeeded = () => { |
|||
if (timeout) clearTimeout(timeout); |
|||
}; |
|||
|
|||
const executeTypingAnimation = () => { |
|||
const currentText = textArray.value[currentTextIndex.value]; |
|||
const processedText = props.reverseMode ? currentText.split('').reverse().join('') : currentText; |
|||
|
|||
if (isDeleting.value) { |
|||
if (displayedText.value === '') { |
|||
isDeleting.value = false; |
|||
if (currentTextIndex.value === textArray.value.length - 1 && !props.loop) return; |
|||
|
|||
props.onSentenceComplete?.(textArray.value[currentTextIndex.value], currentTextIndex.value); |
|||
|
|||
currentTextIndex.value = (currentTextIndex.value + 1) % textArray.value.length; |
|||
currentCharIndex.value = 0; |
|||
timeout = setTimeout(() => {}, props.pauseDuration); |
|||
} else { |
|||
timeout = setTimeout(() => { |
|||
displayedText.value = displayedText.value.slice(0, -1); |
|||
}, props.deletingSpeed); |
|||
} |
|||
} else { |
|||
if (currentCharIndex.value < processedText.length) { |
|||
timeout = setTimeout( |
|||
() => { |
|||
displayedText.value += processedText[currentCharIndex.value]; |
|||
currentCharIndex.value += 1; |
|||
}, |
|||
props.variableSpeed ? getRandomSpeed() : props.typingSpeed |
|||
); |
|||
} else if (textArray.value.length > 1) { |
|||
timeout = setTimeout(() => { |
|||
isDeleting.value = true; |
|||
}, props.pauseDuration); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
watch( |
|||
[displayedText, currentCharIndex, isDeleting, isVisible], |
|||
() => { |
|||
if (!isVisible.value) return; |
|||
clearTimeoutIfNeeded(); |
|||
|
|||
if (currentCharIndex.value === 0 && !isDeleting.value && displayedText.value === '') { |
|||
timeout = setTimeout(() => { |
|||
executeTypingAnimation(); |
|||
}, props.initialDelay); |
|||
} else { |
|||
executeTypingAnimation(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
onMounted(() => { |
|||
if (props.showCursor && cursorRef.value) { |
|||
gsap.set(cursorRef.value, { opacity: 1 }); |
|||
gsap.to(cursorRef.value, { |
|||
opacity: 0, |
|||
duration: props.cursorBlinkDuration, |
|||
repeat: -1, |
|||
yoyo: true, |
|||
ease: 'power2.inOut' |
|||
}); |
|||
} |
|||
|
|||
if (props.startOnVisible && containerRef.value) { |
|||
const observer = new IntersectionObserver( |
|||
entries => { |
|||
entries.forEach(entry => { |
|||
if (entry.isIntersecting) isVisible.value = true; |
|||
}); |
|||
}, |
|||
{ threshold: 0.1 } |
|||
); |
|||
if (containerRef.value instanceof Element) { |
|||
observer.observe(containerRef.value); |
|||
} |
|||
onBeforeUnmount(() => observer.disconnect()); |
|||
} |
|||
}); |
|||
|
|||
onBeforeUnmount(() => { |
|||
clearTimeoutIfNeeded(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<component |
|||
:is="as" |
|||
ref="containerRef" |
|||
:class="`inline-block whitespace-pre-wrap tracking-tight ${className}`" |
|||
v-bind="$attrs" |
|||
> |
|||
<span class="inline" :style="{ color: getCurrentTextColor() }"> |
|||
{{ displayedText }} |
|||
</span> |
|||
<span |
|||
v-if="showCursor" |
|||
ref="cursorRef" |
|||
:class="`ml-1 inline-block opacity-100 ${ |
|||
hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting) ? 'hidden' : '' |
|||
} ${cursorClassName}`" |
|||
> |
|||
{{ cursorCharacter }} |
|||
</span> |
|||
</component> |
|||
</template> |
|||
@ -0,0 +1,42 @@ |
|||
<script setup lang="ts"> |
|||
import { useRouter } from 'vue-router' |
|||
import Particles from '@/components/Particles/Particles.vue' |
|||
import FuzzyText from '@/components/FuzzyText/FuzzyText.vue'; |
|||
|
|||
const router = useRouter() |
|||
|
|||
const handleGoLogin = () => { |
|||
router.push('/login') |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="not-found-page"> |
|||
<Particles :particle-count="50" :particle-colors="['#ffffff', '#aaaaaa']" class="particles-bg" /> |
|||
<div class="fuzzy-container"> |
|||
<FuzzyText :font-size="140" :font-weight="900" color="#fff" :enable-hover="true" :base-intensity="0.18" :hover-intensity="0.5"> |
|||
404 |
|||
</FuzzyText> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.not-found-page { |
|||
min-height: 100vh; |
|||
background: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.particles-bg { |
|||
position: fixed !important; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100% !important; |
|||
height: 100% !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue