Crazy Components
Grid Distortion
WebGL-based grid distortion effect that warps images based on mouse interaction. Features Three.js shader materials, configurable grid size, and smooth relaxation effects.
crazy-componentsgriddistortionwebglthreeshaderinteractive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
grid | number | 20 | Grid size for distortion effect. |
mouse | number | 0.3 | Mouse influence strength. |
strength | number | 0.15 | Distortion strength multiplier. |
relaxation | number | 0.1 | Relaxation speed for smooth transitions. |
imageSrc | string | undefined | Source URL of the image to distort. |
className | string | undefined | Additional CSS classes for custom styling. |