Creates an animated grid that flows with wave motion and responds to cursor movement. Lines distort organically using Perlin noise and react to mouse position with spring physics. Perfect for backgrounds, hero sections, or adding dynamic texture to any design.

Flow Grid

Move your cursor to interact with the grid.

Appearance

Line Color color picker

Color of the grid lines. Lighter colors work on dark backgrounds, darker colors on light backgrounds.

Default: #000000 (black)

X Gap 5-100 pixels

Horizontal spacing between vertical lines. Smaller creates denser grid, larger is more spacious.

Default: 10

Y Gap 10-100 pixels

Vertical spacing between horizontal lines. Controls density of horizontal grid lines.

Default: 32

Wave Motion

Wave Speed X 0.001-0.05

Speed of horizontal wave movement. Lower is slower and calmer, higher is faster.

Default: 0.0125

Wave Speed Y 0.001-0.05

Speed of vertical wave movement. Creates independent motion from horizontal waves.

Default: 0.005

Wave Amplitude X 0-100 pixels

Strength of horizontal wave distortion. Higher creates more dramatic side-to-side movement.

Default: 32

Wave Amplitude Y 0-100 pixels

Strength of vertical wave distortion. Controls up-and-down movement intensity.

Default: 16

Cursor Physics

Friction 0.5-0.99

Resistance to movement. Higher values make grid snap back slower with more flow.

Default: 0.925

Tension 0.001-0.02

Spring force pulling grid back to original position. Higher is more elastic.

Default: 0.005

Max Cursor Movement 10-200 pixels

Maximum distance points can move from cursor interaction. Prevents excessive distortion.

Default: 100

Performance

This element uses HTML5 Canvas with Perlin noise generation for organic wave motion. Grid points have spring physics with velocity and friction. Tracks cursor with momentum and angle for directional effects. Runs at 60fps via requestAnimationFrame. Each point calculates distance from cursor for interactive distortion.