A grid that continuously animates with a ripple effect.
Grid, ripple and mouse settings are wired to the controls underneath. The grid is drawn in a WebGL fragment shader.
| Prop | Type | Default | Description |
|---|---|---|---|
enableRainbow | boolean | false | Enables rainbow color cycling animation for the grid. |
gridColor | string | '#ffffff' | Color of the grid when rainbow mode is disabled. |
rippleIntensity | number | 0.05 | Controls the intensity of the ripple effect from the center. |
gridSize | number | 10.0 | Controls the density/size of the grid pattern. |
gridThickness | number | 15.0 | Controls the thickness of the grid lines. |
fadeDistance | number | 1.5 | Controls how far the fade effect extends from the center. |
vignetteStrength | number | 2.0 | Controls the intensity of the vignette (edge darkening) effect. |
glowIntensity | number | 0.1 | Adds a glow effect to the grid lines. |
opacity | number | 1.0 | Overall opacity of the entire effect. |
gridRotation | number | 0 | Rotate the entire grid pattern by degrees. |
mouseInteraction | boolean | true | Enable mouse/touch interaction to create ripples. |
mouseInteractionRadius | number | 1 | Controls the radius of the mouse interaction effect. |
lightMode | boolean | false | Renders the grid over a white background instead of a transparent one. |
Keyboard shortcuts and ARIA behavior.