Perspective Grid
Infinite scrolling 3D perspective grid with WebGL shader rendering
perspective-grid-tw
Customize
0.5x
1x
1
1
64
1
0°
10
0
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | 400 | Height of the component in pixels or CSS value |
| speed | number | 0.5 | Animation speed multiplier |
| color | string | "#FF9FFC" | Grid color in hex format |
| gridScale | number | 1.0 | Grid scale factor - higher values create smaller grid cells |
| lineThickness | number | 1 | Line thickness (0.1 = very thin, 0.5 = medium, 2.0 = thick) |
| antialiasQuality | number | 64.0 | Anti-aliasing quality - higher values = better quality |
| autoPlay | boolean | true | Whether to automatically play the animation |
| opacity | number | 1.0 | Opacity of the grid (0-1) |
| fadeSmoothness | number | 1 | Fade smoothness - controls how gradually the alpha transitions (higher = smoother blend) |
| perspective | number | 0.0 | Perspective rotation angle in degrees (0 = flat, positive = tilted back) |
| gridLength | number | 10.0 | How far into the distance the grid extends (higher = longer) |
| curve | number | 0.0 | Curve intensity - bends the grid upward at edges (0 = flat, higher = more curved) |
| bottomFade | string | "#0a0a0a" | Bottom fade color - adds a gradient fade at the bottom (e.g., "#000000" for black fade, empty/undefined for no fade) |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the grid |