Components
Canvas-based perspective grid with both a floor and a mirrored ceiling meeting at a shared glowing horizon — classic synthwave room effect.
npx neonblade add grid-sceneDefault grid scene
Wide gap
Pink synthwave
Floor only (no ceiling)
Ceiling only (no floor)
Static green wireframe
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
horizon | number | 0.5 | Horizon line as a fraction of container height (0–1). 0.5 = vertical center. |
gap | number | 0.08 | Empty space between floor and ceiling as a fraction of container height (0–1). Increase for a wider gap around the horizon. |
columns | number | 24 | Number of vertical perspective lines on each plane. |
rows | number | 18 | Number of horizontal grid rows receding into the distance per plane. |
lineColor | string | "#00f3ff" | Color of the grid lines. |
glowColor | string | "#00f3ff" | Glow color applied as a drop-shadow to the lines. |
bgColor | string | "#050505" | Background fill color behind the grid. |
speed | number | 0.6 | Speed of the forward scrolling animation. Set to 0 to disable motion. |
opacity | number | 0.85 | Maximum opacity of the grid lines (0–1). |
lineWidth | number | 1 | Grid line width in pixels. |
showFloor | boolean | true | Whether to render the floor grid (below the horizon). |
showCeiling | boolean | true | Whether to render the ceiling grid (mirrored above the horizon). |
className | string | undefined | Additional CSS classes for the canvas element. |