Grid Distortion
Customize Grid Distortion
Grid10
Mouse0.10
Strength0.15
Relaxation0.90
Props
| Property | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 20 | Size of the distortion grid (5-50) |
| distortionAmount | number | 0.5 | Amount of distortion effect (0-2) |
| distortionSpeed | number | 1 | Speed of distortion animation (0-5) |
| waveAmplitude | number | 0.1 | Amplitude of wave distortion (0-1) |
| waveFrequency | number | 2 | Frequency of wave distortion (0.1-10) |
| mouseRadius | number | 100 | Radius of mouse interaction effect (50-300) |
| mouseStrength | number | 0.5 | Strength of mouse interaction (0-2) |
| color | string | #ffffff | Color of the grid distortion effect |
| opacity | number | 0.8 | Opacity of the distortion effect (0-1) |
| enableMouse | boolean | | Enable or disable mouse interaction |
| enableAnimation | boolean | | Enable or disable animations |
| gridType | string | square | Type of grid - 'square', 'hexagon', or 'triangle' |
| rotation | number | 0 | Rotation angle of the grid (0-360) |
| scale | number | 1 | Scale factor for the grid (0.5-3) |
| className | string | custom-grid-distortion | Additional CSS class names for styling |
| width | string | 100% | Width of the grid distortion container |
| height | string | 600px | Height of the grid distortion container |
| quality | string | high | Rendering quality - 'low', 'medium', or 'high' |
Dependencies
oglreact
Created with ❤️ by Cybershoora