test

<canvas id="gridCanvas"></canvas>
<style>
  #gridCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('gridCanvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas to full window size
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      drawGrid();
    }
    
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    
    // Grid settings
    const gridSize = 50;
    const lineWidth = 0.5;
    const lineColor = 'rgba(200, 200, 200, 0.3)';
    const hoverRadius = 150;
    const hoverEffect = 10;
    
    // Mouse position
    let mouseX = -1000;
    let mouseY = -1000;
    
    // Track mouse position
    document.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      drawGrid();
    });
    
    // Draw the grid
    function drawGrid() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = lineColor;
      ctx.lineWidth = lineWidth;
      
      // Calculate grid points
      const cols = Math.floor(canvas.width / gridSize) + 2;
      const rows = Math.floor(canvas.height / gridSize) + 2;
      
      // Draw vertical lines
      for (let i = 0; i < cols; i++) {
        let x = i * gridSize;
        
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
      }
      
      // Draw horizontal lines
      for (let i = 0; i < rows; i++) {
        let y = i * gridSize;
        
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
      }
      
      // Draw distorted grid points
      ctx.fillStyle = lineColor;
      
      for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
          let x = i * gridSize;
          let y = j * gridSize;
          
          // Calculate distance from mouse
          const dx = mouseX - x;
          const dy = mouseY - y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          // Apply distortion if within hover radius
          if (distance < hoverRadius) {
            const distortionFactor = 1 - distance / hoverRadius;
            const distortion = distortionFactor * hoverEffect;
            
            // Move point away from mouse
            x += (dx / distance) * distortion;
            y += (dy / distance) * distortion;
            
            // Draw larger point
            ctx.beginPath();
            ctx.arc(x, y, 2 * distortionFactor, 0, Math.PI * 2);
            ctx.fill();
          }
        }
      }
    }
    
    // Animation loop for smooth movement
    function animate() {
      drawGrid();
      requestAnimationFrame(animate);
    }
    
    animate();
  });
</script>