A mesmerizing grid of flowing lines animated by Perlin noise — reactively bending and rippling around your cursor.
Made with Workshop
Build your own component with AI
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