Components
Cinematic 3D wave surface flowing diagonally between screen corners with real depth. Single or dual-color gradients, glow/gloss lighting, and cursor-reactive ripples.
npx neonblade add neon-tideNeon
Tide
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
colorA | string | "#00f3ff" | Primary wave colour (hex). |
colorB | string | undefined | Secondary wave colour used to gradient crests vs. troughs. Omit for a single-colour look (defaults to colorA). |
bgColor | string | "#020408" | Renderer background colour and fog colour (hex). |
origin | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right" | Corner the waves flow from. They always travel toward the opposite corner (e.g. top-right → bottom-left), receding in 3D depth rather than a flat 2D diagonal. |
speed | number | 0.5 | Animation speed multiplier for the wave flow. |
amplitude | number | 1.2 | Wave height in world units. |
frequency | number | 0.55 | Spatial frequency/density of the waves. Higher = more ripples. |
glow | number | 0.9 | Fresnel rim-light glow intensity along wave edges. |
gloss | number | 0.6 | Specular highlight intensity on wave crests. |
planeWidth | number | 34 | Surface width along the X axis in world units. |
planeDepth | number | 34 | Surface depth along the Z axis in world units — how far the waves recede into the screen. |
cameraHeight | number | 11 | Camera Y position above the surface origin. |
cameraTilt | number | 1.6 | Camera distance multiplier relative to cameraHeight. Higher values flatten the angle for a more cinematic, distant look. |
gridSegments | number | 120 | Subdivisions per axis of the wave surface (higher = smoother, more GPU cost). |
fog | boolean | true | Exponential fog that fades the surface edges into bgColor. |
opacity | number | 100 | Overall scene opacity (0–100). |
hoverEffect | boolean | true | Enables a cursor-reactive ripple and highlight on the wave surface. |
hoverRadius | number | 4 | Radius of the cursor ripple in world units. |
hoverStrength | number | 1.4 | Peak height added by the cursor ripple. |
className | string | undefined | Extra class names applied to the wrapper div. |