Loading component…
Components /Wave Grid
Interactive 3D grid of cubes rippling with cursor-driven waves
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/wave-grid-background.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content rendered on top of the animated background. |
| gridSize | number | 40 | Grid resolution (N×N cubes). |
| colorBase | string | '#ffffff' | Base cube color and scene tint. |
| colorHigh | string | '#0055ff' | Color of the wave peaks. |
| waveAmplitude | number | 0.4 | Peak displacement multiplier. |
| waveSpeed | number | 6.0 | Wavefront expansion speed (world units/sec). |
| waveFrequency | number | 1.2 | Spatial oscillation frequency. |
| waveWidth | number | 3.0 | Gaussian half-width of the wave ring. |
| waveMaxHeight | number | 0.4 | Hard clamp on displacement height. |
| waveJitter | number | 0.2 | Per-cube positional jitter. |
| autoAnimate | boolean | true | Emit gentle random ripples while the cursor is idle. |
| vignette | boolean | true | Apply the vignette + RGB-shift post-processing pass. |
| className | string | - | Additional classes for the wrapper element. |