Perlin Noise
Canvas-based Perlin noise wave grid background. Configurable line color, wave speed and amplitude; mouse and touch interaction affect grid displacement.
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| lineColor | "black" | Stroke color of the wave grid lines (CSS color). | string |
| backgroundColor | "transparent" | Background color of the container (CSS color). | string |
| waveSpeedX | 0.0125 | Horizontal speed of the Perlin wave animation. | number |
| waveSpeedY | 0.005 | Vertical speed of the Perlin wave animation. | number |
| waveAmpX | 32 | Horizontal amplitude of the wave displacement in pixels. | number |
| waveAmpY | 16 | Vertical amplitude of the wave displacement in pixels. | number |
| xGap | 10 | Horizontal spacing between grid lines in pixels. | number |
| yGap | 32 | Vertical spacing between points on each line in pixels. | number |
| friction | 0.925 | Decay factor for cursor-induced motion (0–1); higher values mean longer drift. | number |
| tension | 0.005 | Spring tension pulling points back toward rest after cursor interaction. | number |
| maxCursorMove | 100 | Maximum pixel displacement of grid points from cursor/touch influence. | number |
| style | — | Inline CSS styles for the root container. | CSSProperties |
| className | — | Additional CSS class for the root container. | string |