The Interactive Wave Grid component transforms any layout into a living surface of motion and depth. Powered by Perlin noise, it generates fluid wave-like distortions that continuously evolve over time. As users move their cursor or touch the screen, the grid dynamically reacts โ creating ripples and distortions that radiate outward with smooth, organic motion.
You can fine-tune the wave behavior, cursor influence, grid spacing, and color scheme to achieve anything from subtle motion backgrounds to striking interactive hero sections.
Key Features:
๐ Procedural Perlin noise-based animation for natural wave motion
๐ฑ๏ธ Interactive cursor-driven distortion with adjustable radius and strength
๐จ Customizable background, stroke, and cursor colors
โ๏ธ Tunable wave amplitude, speed, and grid spacing
๐ฑ Smooth mouse and touch support
๐งฉ Ideal for interactive landing pages, dynamic headers, or ambient visual effects