js snips

    <script>
     const coordsDisplay = document.getElementById('coords');
    let isDecrypted = false;

    const glitchGlyphs = ['Ξ','∆','⟁','✷','∞','ƒ','ꙮ','⊗','✦','Ψ','⧖','λ','β','µ','∇','Ω','⎊','₿','≡','╳','▒','░','✗','╱','⧘'];
    const hex = '0123456789ABCDEF';

    function rand(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
    }

    function generateGlitchString(prefix, realVal) {
    const hexVal = realVal.toString(16).toUpperCase().padStart(3, '0');
    let str = `${prefix}=`;
    for (let i = 0; i < 4; i++) {
        str += Math.random() > 0.5 && i < hexVal.length
        ? hexVal[i]
        : rand(glitchGlyphs);
    }
    return str;
    }

    document.addEventListener('mousemove', (e) => {
    if (isDecrypted) return;

    const glitchX = generateGlitchString('ΞX', e.clientX);
    const glitchY = generateGlitchString('ΨY', e.clientY);
    coordsDisplay.textContent = `${glitchX}   ${glitchY}`;
    });

    // Decrypt on hover
    coordsDisplay.addEventListener('mouseenter', () => {
    isDecrypted = true;
    coordsDisplay.classList.add('decrypted');
    });

    coordsDisplay.addEventListener('mousemove', (e) => {
    if (!isDecrypted) return;
    coordsDisplay.textContent = `X: ${e.clientX}   Y: ${e.clientY}`;
    });

    coordsDisplay.addEventListener('mouseleave', () => {
    isDecrypted = false;
    coordsDisplay.classList.remove('decrypted');
    });

      const vLine = document.getElementById('vertical-line');
      const hLine = document.getElementById('horizontal-line');
    
      // Background color change on click
    //   document.body.addEventListener('click', () => {
    //     document.body.style.backgroundColor = `hsl(${Math.random()}, 70%, 80%)`;
    //   });
    
      // Update crosshairs and coords
      document.addEventListener('mousemove', (e) => {
        vLine.style.left = `${e.clientX}px`;
        hLine.style.top = `${e.clientY}px`;
      });
    </script>