Grid Distortion

Warped grid mesh distorts smoothly reacting to cursor.

Default

Grid size and mouse size are wired to the controls underneath. Move the pointer over the image to push the grid around.

Demo Content

FeaturesAbout Sign up

New Creative Components

Get started Learn more

Grid Size10

Mouse Size0.25

Prop	Type	Default	Description
`imageSrc`	`string`		The image you want to render inside the container.
`grid`	`number`	`15`	The number of cells present in the distortion grid
`mouse`	`number`	`0.1`	The size of the distortion effect that follows the cursor.
`relaxation`	`number`	`0.9`	The speed at which grid cells return to their initial state.
`strength`	`number`	`0.15`	The overall strength of the distortion effect.

Keyboard shortcuts and ARIA behavior.

The image is drawn on a canvas, so it has no alt text. Treat it as decoration or describe it in the surrounding content.