Perspective Grid
Infinite scrolling 3D perspective grid with WebGL shader rendering
Customize
Props
16| 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 |
widthnumber | stringWidth of the component in pixels or CSS value
"100%"heightnumber | stringHeight of the component in pixels or CSS value
400speednumberAnimation speed multiplier
0.5colorstringGrid color in hex format
"#FF9FFC"gridScalenumberGrid scale factor - higher values create smaller grid cells
1.0lineThicknessnumberLine thickness (0.1 = very thin, 0.5 = medium, 2.0 = thick)
1antialiasQualitynumberAnti-aliasing quality - higher values = better quality
64.0autoPlaybooleanWhether to automatically play the animation
trueopacitynumberOpacity of the grid (0-1)
1.0fadeSmoothnessnumberFade smoothness - controls how gradually the alpha transitions (higher = smoother blend)
1perspectivenumberPerspective rotation angle in degrees (0 = flat, positive = tilted back)
0.0gridLengthnumberHow far into the distance the grid extends (higher = longer)
10.0curvenumberCurve intensity - bends the grid upward at edges (0 = flat, higher = more curved)
0.0bottomFadestringBottom fade color - adds a gradient fade at the bottom (e.g., "#000000" for black fade, empty/undefined for no fade)
"#0a0a0a"classNamestringAdditional CSS classes
""childrenReact.ReactNodeContent to render on top of the grid
undefined