"use client"; import * as React from "react"; import { motion } from "framer-motion"; import { useEffect, useRef } from "react"; const shakeVariants1 = { shake: { x: [0, -2, 2, -1, 1, 0], transition: { duration: 0.8, repeat: Infinity, repeatType: "loop" as const, ease: "easeInOut" as const, }, }, }; const shakeVariants2 = { shake: { x: [0, 1.5, -1.5, 2, -2, 0], transition: { duration: 1.2, repeat: Infinity, repeatType: "loop" as const, ease: "easeInOut" as const, }, }, }; const shakeVariants3 = { shake: { x: [0, -1, 1, -2, 2, -1, 0], transition: { duration: 0.5, repeat: Infinity, repeatType: "loop" as const, ease: "easeInOut" as const, }, }, }; const shakeVariants4 = { shake: { x: [0, 2, -1, 1.5, -2, 0], transition: { duration: 1.5, repeat: Infinity, repeatType: "loop" as const, ease: "easeInOut" as const, }, }, }; const shakeVariants5 = { shake: { x: [0, -1.5, 1, -1, 2, -2, 0], transition: { duration: 0.7, repeat: Infinity, repeatType: "loop" as const, ease: "easeInOut" as const, }, }, }; const getVariants = (index: number) => { const variants = [ shakeVariants1, shakeVariants2, shakeVariants3, shakeVariants4, shakeVariants5, ]; return variants[index % variants.length]; }; const getRandomDelay = () => Math.random() * 2; const FuzzyWrapper = ({ children, baseIntensity = 0.3, className, }: { children: React.ReactNode; baseIntensity?: number; className?: string; }) => { const canvasRef = useRef void }>( null ); const svgContainerRef = useRef(null); useEffect(() => { let animationFrameId: number; let isCancelled = false; const canvas = canvasRef.current; const svgContainer = svgContainerRef.current; if (!canvas || !svgContainer) return; // Clean up previous animation if it exists if (canvas.cleanupFuzzy) { canvas.cleanupFuzzy(); } const init = async () => { if (isCancelled) return; const ctx = canvas.getContext("2d"); if (!ctx) return; // Get the SVG element const svgElement = svgContainer.querySelector("svg"); if (!svgElement) return; // Wait for fonts and animations to be ready await new Promise((resolve) => setTimeout(resolve, 100)); // Get SVG dimensions const svgRect = svgElement.getBoundingClientRect(); const svgWidth = svgRect.width || 800; const svgHeight = svgRect.height || 232; // Create offscreen canvas const offscreen = document.createElement("canvas"); const offCtx = offscreen.getContext("2d"); if (!offCtx) return; offscreen.width = svgWidth; offscreen.height = svgHeight; // Convert SVG to canvas const convertSvgToCanvas = () => { return new Promise((resolve) => { const svgData = new XMLSerializer().serializeToString(svgElement); const img = new Image(); const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8", }); const url = URL.createObjectURL(svgBlob); img.onload = () => { offCtx.clearRect(0, 0, offscreen.width, offscreen.height); offCtx.drawImage(img, 0, 0, svgWidth, svgHeight); URL.revokeObjectURL(url); resolve(); }; img.src = url; }); }; // Setup main canvas const horizontalMargin = 50; const verticalMargin = 50; canvas.width = svgWidth + horizontalMargin * 2; canvas.height = svgHeight + verticalMargin * 2; const fuzzRange = 20; const run = async () => { if (isCancelled) return; // Re-render SVG to capture animation changes await convertSvgToCanvas(); // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(horizontalMargin, verticalMargin); // Apply fuzzy effect line by line for (let j = 0; j < svgHeight; j++) { const dx = Math.floor( baseIntensity * (Math.random() - 0.5) * fuzzRange ); ctx.drawImage(offscreen, 0, j, svgWidth, 1, dx, j, svgWidth, 1); } ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transform animationFrameId = window.requestAnimationFrame(run); }; run(); const cleanup = () => { window.cancelAnimationFrame(animationFrameId); }; canvas.cleanupFuzzy = cleanup; }; init(); return () => { isCancelled = true; window.cancelAnimationFrame(animationFrameId); if (canvas && canvas.cleanupFuzzy) { canvas.cleanupFuzzy(); } }; }, [baseIntensity]); return (

{/* Hidden SVG container for rendering */}

{children}

{/* Canvas with fuzzy effect */}

); }; interface Glitchy404Props { width?: number; height?: number; color?: string; } export function Glitchy404({ width = 860, height = 232, color = "#fff" }: Glitchy404Props) { return (

); }