Components
Three.js wireframe terrain animated with layered sine waves and a cursor-reactive Gaussian bump. Mouse hover deforms the mesh in real time.
npx neonblade add holographic-terrainHolographic
Terrain
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
lineColor | string | "#00ffff" | Wireframe line colour (hex). |
bgColor | string | "#020a0a" | Renderer background colour and fog colour (hex). |
waveAmplitude | number | 0.8 | Peak height of animated sine waves in world units. |
waveFrequency | number | 1.5 | Spatial frequency of the terrain waves. Higher = more peaks. |
waveSpeed | number | 1 | Animation speed multiplier. |
bumpRadius | number | 3.5 | Radius of the cursor interaction bump in world units. |
bumpStrength | number | 2.5 | Peak height of the Gaussian bump raised by cursor hover. |
planeWidth | number | 24 | Terrain width along the X axis in world units. |
planeDepth | number | 24 | Terrain depth/length along the Z axis in world units. |
cameraHeight | number | 10 | Camera Y position above the terrain origin. Camera Z is auto-derived (height × 1.4) to maintain a ~35° viewing angle. |
gridSegments | number | 60 | Subdivisions per axis of the terrain plane (higher = more detail, more GPU cost). |
fog | boolean | true | Exponential fog that fades terrain edges into bgColor. |
opacity | number | 100 | Overall scene opacity (0–100). |
className | string | undefined | Extra class names applied to the wrapper div. |