3D floating lines that react to cursor movement.
Waves, line settings and the gradient are wired to the controls underneath. Move the pointer over the lines to bend them.
| Prop | Type | Default | Description |
|---|---|---|---|
linesGradient | string[] | undefined | Array of hex color strings for gradient coloring of lines (max 8 colors). |
enabledWaves | Array<'top' | 'middle' | 'bottom'> | ['top', 'middle', 'bottom'] | Which wave layers to display. Can toggle individual waves on/off. |
lineCount | number | number[] | [6] | Number of lines per wave. Single number applies to all waves, or array for per-wave control. |
lineDistance | number | number[] | [5] | Spacing between lines. Single number applies to all waves, or array for per-wave control. |
topWavePosition | { x: number; y: number; rotate: number } | undefined | Position and rotation settings for the top wave layer. |
middleWavePosition | { x: number; y: number; rotate: number } | undefined | Position and rotation settings for the middle wave layer. |
bottomWavePosition | { x: number; y: number; rotate: number } | { x: 2.0, y: -0.7, rotate: -1 } | Position and rotation settings for the bottom wave layer. |
animationSpeed | number | 1 | Speed multiplier for the wave animation. |
interactive | boolean | true | Whether the lines react to mouse/pointer movement. |
bendRadius | number | 5 | Radius of the area affected by mouse interaction. |
bendStrength | number | -0.5 | Intensity of the bend effect when interacting with mouse. |
mouseDamping | number | 0.05 | Smoothing factor for mouse movement tracking (0-1). |
parallax | boolean | true | Enable parallax effect with mouse movement. |
parallaxStrength | number | 0.2 | Strength of the parallax effect. |
mixBlendMode | string | 'screen' | CSS mix-blend-mode applied to the container. |
backgroundColor | string | '#000000' | Background color used by the shader. |
lightMode | boolean | false | Draws dark lines over a white background and turns off the blend mode. |
Keyboard shortcuts and ARIA behavior.