Wavy Lines

About

Interactive animated wave grid component with fluid motion and mouse interaction effects. Creates dynamic flowing lines that respond to cursor movement with physics-based animations.

Live demo: https://loving-population-943373.framer.app/demo

Features

• Choose between vertical, horizontal or both lines

• Animated wave grid with Perlin noise-based movement

• Interactive mouse/touch effects with radial displacement

• Customizable wave speeds (horizontal and vertical)

• Adjustable wave amplitudes for different motion intensities

• Configurable grid spacing (X and Y gaps)

• Physics controls (friction, tension, max displacement)

• Customizable line and background colors

• Smooth spring-based cursor interaction damping

• Responsive canvas that fills container dimensions

The component creates a mesmerizing animated background perfect for modern web interfaces, with natural-feeling wave motion that users can interact with by moving their cursor across the surface.

Pro tip

Set something on top of the wavy lines and play with blend modes to create cool effects.