The grid pattern renders using individual SVG line and circle elements that respond to mouse proximity. Lines distort with a wave effect and change color based on distance from the cursor, while dots follow the movement of their intersecting lines.

The AnimatedGridWithDots component is performance-optimized using requestAnimationFrame with linear interpolation for smooth animations. It uses passive event listeners, MutationObserver for dark mode detection, and automatically stops the animation loop when the mouse leaves to minimize CPU usage.

Props include gridSize (default 80px), dotSize (default 2px), glowRadius (default 150px), and separate highlightColor / highlightColorDark for theming with Tailwind CSS color variables.

Ideal for hero sections, landing pages, and interactive showcases where you want an engaging grid texture that responds to user interaction.